标记被移除时设置缩放级别 [英] set zoom level when marker is removed
问题描述
使用javascript google-maps api
我现在已经设置了删除制作者，当我添加像这样的位置时设置它。
function addLocation（map，location）{
var point = new GLatLng（location.lat，location.lon）;
var marker = new GMarker（point）;
map.addOverlay（marker）;
bounds.extend（marker.getPoint（））;
'（'< a href =＃class =closebutton>'）。click（function（e）{
e.preventDefault（）;
$（this）.parent（）。remove（）;
map.removeOverlay（marker）;
map.closeInfoWindow（）;
}）。prependTo（$（'< li> '+ location.label +'< / li>）。click（function（）{
showMessage（marker，location.label，map）;
}）。appendTo（＃list）） ;
GEvent.addListener（marker，click，function（）{
showMessage（marker，location.label，map）;
}）;
}
然后我有一个设置缩放级别的函数
function zoomToBounds（map）{
map.setCenter（bounds.getCenter（））;
map.setZoom（map.getBoundsZoomLevel（bounds） - 1）;
}
这是在我的addLocations函数后调用的，并且做了我想要的操作并设置所以我可以看到所有的制造商。
现在，如果我之后立即调用zoomToBounds
map.removeOverlay（marker）;
然后它不移动它只停留在相同的缩放级别
所以我想知道的是，如果在我删除标记之后有一种方法可以设置缩放级别吗？解决方案
您好 - 这绝对是您可以使用Google地图API完成的事情。
你需要确保你做的一件重要事情是在试图让GMap2对象重新计算它的位置和缩放级别之前更新GLatLngBounds对象。 b
$ b
为此，我建议保留GMarkers使用的所有点的某种数据存储。
使用GEvent侦听器使用当GMarker被移除时，您还可以将zoomToBounds函数绑定到事件。
以下是我正在讨论的代码片段：
var bounds = new GLatLngBounds（）;
var points = {};
函数createMarker（location）
{
/ *创建我们的标记* /
var point = new GLatLng（location.lat，location.lon）;
var marker = new GMarker（point）;
/ *向Marker添加一个额外的标识符* /
marker.myMarkerName ='uniqueNameToIDMarkerPointLater';
/ *将此标记使用的点存储在点对象中* /
points [marker.myMarkerName] = point;
*创建一个事件触发标记被移除后调用zoomToBounds * /
GEvent.addListener（marker，remove，function（）
{
/ *将标记的ID传递给zoomToBounds * /
zoomToBounds（this.myMarkerName）;
};
/ *将新点添加到现有边界计算* /
bounds.extend（point）;
/ *在地图上绘制标记* /
map.addOverlay（marker）;
}
函数zoomToBounds（名称）
{
/ *从Point Data Store中删除Point * /
points [name] = null;
/ * Create一个新的Bounds对象* /
bounds = new GLatLngBounds（）;
/ *遍历所有点并构建新的GLatLngBounds对象* /
（var point in points ）
{
if（points [point]！= null）
{
bounds.extend（points [point]）;
}
}
/ *计算地图的位置和缩放* /
map.setCenter（bounds.getCenter（））;
map.setZoom（map.getBoundsZoomLevel（bounds）-1）;
}
GLatLngBounds对象不会存储所有用来计算它的点最大和最小边界 - 所以需要创建一个新对象来重新定义矩形的边界。
我还创建了一个位于
< a href =http://johnmick.net/removingMarkers =nofollow noreferrer>在这里。
随意使用源代码无论你需要什么 - 让我知道你是如何做到的，或者如果你有任何其他问题！
这里是没有任何评论的代码：
var bounds = new GLatLngBounds（）;
var points = {};
函数createMarker（location）
{
var point = new GLatLng（location.lat，location.lon）;
var marker = new GMarker（point）;
marker.myMarkerName ='uniqueNameToIDMarkerPointLater';
points [marker.myMarkerName] = point;
GEvent.addListener（marker，remove，function（）
{
zoomToBounds（this.myMarkerName）;
};
bounds.extend（point）;
map.addOverlay（marker）;
}
函数zoomToBounds（name）
{
points [name] = null;
bounds = new GLatLngBounds（）;
for（var point in points）
{
if（points [point]！= null）
{
bounds.extend（points [point]）;
}
}
map.setCenter（bounds.getCenter（））;
map.setZoom（map.getBoundsZoomLevel（bounds）-1）;
}
using javascript google-maps api
I currently have it setup to remove a maker I set it up when I am adding a location like so
function addLocation(map,location) {
var point = new GLatLng(location.lat, location.lon);
var marker = new GMarker(point);
map.addOverlay(marker);
bounds.extend(marker.getPoint());
$('<a href="#" class="closebutton">').click(function(e){
e.preventDefault();
$(this).parent().remove();
map.removeOverlay(marker);
map.closeInfoWindow();
}).prependTo($('<li>'+location.label+'</li>').click(function() {
showMessage(marker, location.label,map);
}).appendTo("#list"));
GEvent.addListener(marker, "click", function() {
showMessage(marker, location.label,map);
});
}
then I have a function that sets the zoom level
function zoomToBounds(map) {
map.setCenter(bounds.getCenter());
map.setZoom(map.getBoundsZoomLevel(bounds) - 1);
}
this is called after my addLocations function and does what I want it do and sets the zoom level so I can see all the makers.
Now if I put a call to zoomToBounds right after
map.removeOverlay(marker);
then it doesn't move it just stays at the same zoom level
so what I want to know is if there is a way for me to set the zoom level after I remove a marker ??
Hey there - this is definitely something you can accomplish using Google Maps API.
One important thing that you need to make sure you do is update the GLatLngBounds object before attempting to have the GMap2 object recalculate it's position and zoom level.
To do this, I would suggest keeping some sort of data store of all the points the GMarkers are using.
Using GEvent Listeners you can also tie the zoomToBounds function to an event, when a GMarker is removed.
Here is a code snippet of what I am talking about:
var bounds = new GLatLngBounds();
var points = {};
function createMarker(location)
{
/*Create Our Marker*/
var point = new GLatLng(location.lat,location.lon);
var marker = new GMarker(point);
/*Add an additional identifier to the Marker*/
marker.myMarkerName = 'uniqueNameToIDMarkerPointLater';
/*Store the point used by this Marker in the points object*/
points[marker.myMarkerName] = point;
/*Create an event that triggers after the marker is removed to call zoomToBounds*/
GEvent.addListener(marker,"remove",function()
{
/*Passes the marker's ID to zoomToBounds*/
zoomToBounds(this.myMarkerName);
};
/*Add the new point to the existing bounds calculation*/
bounds.extend(point);
/*Draws the Marker on the Map*/
map.addOverlay(marker);
}
function zoomToBounds(name)
{
/*Remove the Point from the Point Data Store*/
points[name]=null;
/*Create a new Bounds object*/
bounds = new GLatLngBounds();
/*Iterate through all our points and build our new GLatLngBounds object*/
for (var point in points)
{
if (points[point]!=null)
{
bounds.extend(points[point]);
}
}
/*Calculate the Position and Zoom of the Map*/
map.setCenter(bounds.getCenter());
map.setZoom(map.getBoundsZoomLevel(bounds)-1);
}
The GLatLngBounds object does not store all of the points that it used to calculate it's maximum and minimum bounds - so a new object needs to be created to redefine the bounds of the rectangle.
I also created a functioning example of this located here.
Feel free to use the source code to whatever you need - let me know how you make out with it, or if you have any other questions!
Here is the code without any comments:
var bounds = new GLatLngBounds();
var points = {};
function createMarker(location)
{
var point = new GLatLng(location.lat,location.lon);
var marker = new GMarker(point);
marker.myMarkerName = 'uniqueNameToIDMarkerPointLater';
points[marker.myMarkerName] = point;
GEvent.addListener(marker,"remove",function()
{
zoomToBounds(this.myMarkerName);
};
bounds.extend(point);
map.addOverlay(marker);
}
function zoomToBounds(name)
{
points[name]=null;
bounds = new GLatLngBounds();
for (var point in points)
{
if (points[point]!=null)
{
bounds.extend(points[point]);
}
}
map.setCenter(bounds.getCenter());
map.setZoom(map.getBoundsZoomLevel(bounds)-1);
}
这篇关于标记被移除时设置缩放级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
