问题描述
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）;
某些图标将显示在视口/可见区域外。
和想法？
预先感谢。
考虑下面的例子，它将在美国东北部生成10个随机点，并应用 fitBounds（）方法。 <！DOCTYPE html>
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title> Google地图LatLngBounds.extend（）演示< / title>
< script src =http://maps.google.com/maps/api/js?sensor=false
type =text / javascript>< / script>
< / head>
< body>
< div id =mapstyle =width：400px; height：300px;>< / div>
< script type =text / javascript>
var map = new google.maps.Map（document.getElementById（'map'），{$ b $ mapTypeId：google.maps.MapTypeId.TERRAIN
}）;
var markerBounds = new google.maps.LatLngBounds（）;
var randomPoint，i;
（i = 0; i //在东北美国地区生成10个随机点
randomPoint = new google.maps.LatLng（39.00 +（Math.random（） - 0.5）* 20，
-77.00 +（Math.random（） - 0.5）* 20）;
//为每个随机点绘制一个标记
new google.maps.Marker（{
position：randomPoint，
map：map
}） ;
//用每个随机点扩展markerBounds。
markerBounds.extend（randomPoint）;
}
//在结尾处，markerBounds将是包含
//的最小边界框//我们的10个随机点
//最后我们可以调用Map.fitBounds（）方法将地图设置为适合
//我们的markerBounds
map.fitBounds（markerBounds）;
< / script>
< / body>
< / html>
刷新此示例很多次，没有任何标记出现在视口外。当隐藏在控件后面时，最多有时候一个标记会从顶部稍微剪切：
fitBounds（）总是在 LatLngBounds 对象和视口。这在下面的屏幕截图中清楚地显示，其中红色边框表示传递给 fitBounds（） LatLngBounds >方法：
您可能也有兴趣检查以下关于主题的Stack Overflow帖子： Google地图api V3中的fitbounds（）不适合边界 >
I have a problem with googlemaps fitBounds functions.
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.
Consider the following example, which will generate 10 random points on the North East USA, and applies the fitBounds() method.
<!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:
Google Maps LatLngBounds.extend() Demo http://img825.imageshack.us/img825/7424/fitboundsfit.png
It is also worth nothing that the fitBounds() always leaves a small margin between the LatLngBounds object and the viewport. This is clearly shown in the screenshots below, where the red bounding box represents the LatLngBounds which is passed to the fitBounds() method:
fitBounds Padding http://img204.imageshack.us/img204/9149/fitit.png
fitBounds Padding http://img441.imageshack.us/img441/9615/fitus.png
You may also be interested in checking out the following Stack Overflow posts on the topic:
这篇关于Google地图fitBounds工作不正常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！