javascript Google 地图 fitBounds 无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3407723/
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
Google Maps fitBounds is not working properly
提问by user160820
I have a problem with googlemaps fitBounds functions.
我对 googlemaps fitBounds 函数有问题。
for (var i = 0; i < countries.length; i++) {
var country = countries[i];
var latlng = new google.maps.LatLng(parseFloat(country.lat), parseFloat(country.lng));
mapBounds.extend(latlng);
}
map.fitBounds(mapBounds);
Some icons will be displayed outside the viewport / Visible area.
一些图标将显示在视口/可见区域之外。
And idea?
和想法？
Thanks in advance.
提前致谢。
回答by Daniel Vassallo
Consider the following example, which will generate 10 random points on the North East USA, and applies the fitBounds()method.
考虑以下示例，它将在美国东北部生成 10 个随机点，并应用该fitBounds()方法。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps LatLngBounds.extend() Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var markerBounds = new google.maps.LatLngBounds();
var randomPoint, i;
for (i = 0; i < 10; i++) {
// Generate 10 random points within North East USA
randomPoint = new google.maps.LatLng( 39.00 + (Math.random() - 0.5) * 20,
-77.00 + (Math.random() - 0.5) * 20);
// Draw a marker for each random point
new google.maps.Marker({
position: randomPoint,
map: map
});
// Extend markerBounds with each random point.
markerBounds.extend(randomPoint);
}
// At the end markerBounds will be the smallest bounding box to contain
// our 10 random points
// Finally we can call the Map.fitBounds() method to set the map to fit
// our markerBounds
map.fitBounds(markerBounds);
</script>
</body>
</html>
Refreshing this example many times, no marker ever goes outside the viewport. At most, sometimes a marker is slightly clipped from the top when hidden behind the controls:
多次刷新此示例，没有任何标记超出视口。最多，有时标记隐藏在控件后面时会从顶部稍微剪掉：
It is also worth nothing that the fitBounds()always leaves a small margin between the LatLngBoundsobject and the viewport. This is clearly shown in the screenshots below, where the red bounding box represents the LatLngBoundswhich is passed to the fitBounds()method:
这也是一文不值的是，fitBounds()总是离开之间小幅度LatLngBounds对象和视口。这清楚地显示在下面的屏幕截图中，其中红色边界框代表LatLngBounds传递给fitBounds()方法的 ：
You may also be interested in checking out the following Stack Overflow posts on the topic:
您可能也有兴趣查看以下有关该主题的 Stack Overflow 帖子：
回答by Marcelo
Show us a link to the patient. How many countries do you have in the countries array? The entire world? Are your bounds crossing the anti-meridian?
向我们显示患者的链接。您在国家/地区数组中有多少个国家/地区？整个世界？你的界限是否越过反子午线？
country.lat and country.lng are one point per country, and that's not enough to define the bounding box of the country. Is that some sort of "country centroid"?
country.lat 和 country.lng 是每个国家的一分，这不足以定义国家/地区的边界框。那是某种“国家质心”吗？
If that's the case, and if you have markers east of the centroid of the easternmost country, or to the west of the centroid of the westermost country, those markers will, of course, fall outside the bounds that you're defining.
如果是这种情况，并且如果您在最东国家的质心以东或最西国家的质心以西有标记，那么这些标记当然会超出您定义的范围。
The map.fitBounds()method works fine. :-)
该map.fitBounds()方法工作正常。:-)
Marcelo.
马塞洛。
回答by hadimbj
Check if your google map object is shown properly in the area you have given. it is possible that some part of your google map object is overflowed outside it's container and the markers are in that area, which they exists by you can't see them.
检查您的谷歌地图对象是否在您提供的区域中正确显示。您的谷歌地图对象的某些部分可能会溢出其容器之外，并且标记位于该区域，而您无法看到它们存在于该区域。
