根据标记放大和居中Google Map（JavaScript API V3） [英] Zoom and center a Google Map according to its markers (JavaScript API V3)
本文介绍了根据标记放大和居中Google Map（JavaScript API V3）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我认为标题已经足够了，我甚至没有看到如何为V2和V1 API做到这一点：/ / $ / $>
感谢：）
解决方案
正如其他答案所示， fitBounds（） 方法应该有效。
考虑以下示例，该示例将在美国东北部地区生成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; 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>
刷新此示例很多次，没有标记出现在视口之外：
I think the title is enough, I don't even see how to do this for the V2 and V1 API :/
Thanks :)
解决方案
As the other answers suggested, the fitBounds() method should do the trick.
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:
这篇关于根据标记放大和居中Google Map（JavaScript API V3）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
