Google maps 谷歌地图可拖动标记缩放以适应所有标记
我有一个工作版本的地图和一个可拖动的标记。放大以包含所有标记Google maps 谷歌地图可拖动标记缩放以适应所有标记,google-maps,google-maps-api-3,zooming,fitbounds,Google Maps,Google Maps Api 3,Zooming,Fitbounds,我有一个工作版本的地图和一个可拖动的标记。放大以包含所有标记 bounds.extend(results[0].geometry.location); map.fitBounds(bounds); 其中结果[0]。几何体.location是新的可拖动位置 如果新地点正在形成一个更大的区域,这种方法就有效了。但当我将标记拖到离其余标记更近的位置时,我认为这不会扩展边界,因此不会放大 有什么想法吗?当您拖放标记时,将标记位置添加到包含原始边界的临时LatLngBounds对象,并将贴图边界与每个拖
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
其中结果[0]。几何体.location
是新的可拖动位置
如果新地点正在形成一个更大的区域,这种方法就有效了。但当我将标记拖到离其余标记更近的位置时,我认为这不会扩展边界,因此不会放大
有什么想法吗?当您拖放标记时,将标记位置添加到包含原始边界的临时LatLngBounds对象,并将贴图边界与每个拖放上的边界相匹配
var mapOptions = {
center: new google.maps.LatLng(38.68551, -96.341308),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var bounds = new google.maps.LatLngBounds(),
markers = [];
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.69, -96.14),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.65, -96.44),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.56, -96.56),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.42, -96.98),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.31, -96.45),map: map}));
for (var m in markers) {
bounds.extend(markers[m].getPosition());
}
map.fitBounds(bounds);
var dropMarker = function(latlng) {
var marker = new google.maps.Marker({position: latlng, map: map}),
tempBounds = new google.maps.LatLngBounds();
// notice we use the union method here to add the original bounds object
tempBounds.union(bounds).extend(marker.getPosition());
map.fitBounds(tempBounds);
}
// imitate dropping marker far away from others
setTimeout(function() {
dropMarker(new google.maps.LatLng(31, -96));
}, 2000);
// imitate dropping marker close to others
setTimeout(function() {
dropMarker(new google.maps.LatLng(38.5, -96.5));
}, 5000);
不只是拟合临时边界,您可以尝试map panToBounds方法以获得平滑过渡。使用边界中已包含的标记扩展边界不会更改边界。它应该缩放以显示所有标记。如果希望它放大新添加的标记,则需要执行其他操作。如果这不是问题所在,你需要在你的问题中加入更多的上下文。这基本上是在每次拖动结束事件时重新进行绑定。我会想象有一种更聪明的方法来解决这个问题。你不是在计算每一滴的界限。计算初始边界一次,只需将标记位置添加到每个标记放置的初始边界。这对放大和缩小都有效。