javascript 设置谷歌地图视口以自动适应各种位置的 (n) 个标记的位置的窗格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5997633/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting a Google Maps viewport to automatically fit pane for locations of (n) markers of various locations
提问by dclowd9901
The approach I took thus far has been:
到目前为止，我采取的方法是：
function addMarker( query ) {
var geocoder = new google.maps.Geocoder();
var afterGeocode = $.Deferred();
// Geocode 'query' which is the address of a location.
geocoder.geocode(
{ address: query },
function( results, status ){
if( status === 'OK' ){
afterGeocode.resolve( results ); // Activate deferred.
}
}
);
afterGeocode.then( function( results ){
var mOptions = {
position: results[0].geometry.location,
map: map
}
// Create and drop in marker.
var marker = new google.maps.Marker( mOptions );
marker.setAnimation( google.maps.Animation.DROP );
var current_bounds = map.getBounds(); // Get current bounds of map
// use the extend() function of the latlngbounds object
// to incorporate the location of the marker
var new_bounds = current_bounds.extend( results[0].geometry.location );
map.fitBounds( new_bounds ); // fit the map to those bounds
});
}
The problem I'm running into is that the map inexplicably zooms out by some amount, no matter if the new marker fits within the current viewport or not.
我遇到的问题是地图莫名其妙地缩小了一些，无论新标记是否适合当前视口。
What am I doing wrong?
我究竟做错了什么？
ADDENDUM
附录
I added logs and an additional variable to capture the map bounds afterthe transition was made (new_new_bounds)
我添加了日志和一个额外的变量来在转换完成后捕获地图边界(new_new_bounds)
current_bounds = // Map bounds before anything is done.
{-112.39575760000002, 33.60691883366427},
{-112.39295444655761, 33.639099}
new_bounds = // From after the extend
{-112.39295444655761, 33.60691883366427},
{-112.39575760000002, 33.639099}
new_new_bounds = // From after the fitbounds
{-112.33942438265382, 33.588697452015374},
{-112.44928766390382, 33.657309727063996}
采纳答案by dclowd9901
OK, so after much wrangling, it turns out that the problem was a map's bounds are not the same as a map's bounds after fitBounds(). What happens (I presume), is Google takesthe bounds you give it in the fitBounds()method, and then pads them. Every time you send the current bounds to fitBounds(), You're not going to fit bounds(x,y), you're going to fit bounds(x+m,y+m) where m = the arbitrary margin.
好的，经过多次争论，事实证明问题是地图的边界与fitBounds(). 会发生什么（我猜想），是 Google获取您在fitBounds()方法中提供的边界，然后填充它们。每次您将当前边界发送到 时fitBounds()，您将不会拟合 bounds(x,y)，您将拟合 bounds(x+m,y+m) 其中 m = 任意边距。
That said, the best approach was this:
也就是说，最好的方法是这样的：
var current_bounds = map.getBounds();
var marker_pos = marker.getPosition();
if( !current_bounds.contains( marker_pos ) ){
var new_bounds = current_bounds.extend( marker_pos );
map.fitBounds( new_bounds );
}
So, the map will only fit bounds if a marker placed falls outside the current map bounds. Hope this helps anyone else who hits this problem.
因此，只有当放置的标记位于当前地图边界之外时，地图才会适合边界。希望这可以帮助遇到此问题的任何其他人。
回答by Gigamegs
A possible explanation is that you randomly placed your new marker into the gap of the z-curve. A z-curve recursivley subdivide the map into 4 smaller tiles but that's also the reason why there are gaps between the tiles. A better way would be to use a hilbert curve or a moore curve for map applications. There is a patented search algorithm covering this issue, I think it is called multidimensional range query in quadtrees. You want to look for Nick's hilbert curce quadtree spatial index blog.
一种可能的解释是您将新标记随机放置在 z 曲线的间隙中。z 曲线递归将地图细分为 4 个较小的图块，但这也是图块之间存在间隙的原因。更好的方法是在地图应用程序中使用希尔伯特曲线或摩尔曲线。有一个专利搜索算法涵盖了这个问题，我认为它在四叉树中称为多维范围查询。您想查找 Nick 的 hilbert curce 四叉树空间索引博客。
