根据其标记缩放和居中 Google 地图（JavaScript API V3）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3520810/
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
Zoom and center a Google Map according to its markers (JavaScript API V3)
提问by Calou
I think the title is enough, I don't even see how to do this for the V2 and V1 API :/
我认为标题就足够了，我什至不知道如何为 V2 和 V1 API 做到这一点：/
Thanks :)
谢谢 ：）
回答by Daniel Vassallo
As the other answers suggested, the fitBounds()method should do the trick.
正如其他答案所建议的那样，该fitBounds()方法应该可以解决问题。
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:
多次刷新此示例，没有标记超出视口：
回答by Klark
Here is the way:
这是方法：
map.fitBounds(bounds);
map.setCenter(bounds.getCenter());
bounds is an array of the coordinates (markers). Every time when you place marker do something like:
bounds 是一个坐标数组（标记）。每次放置标记时，请执行以下操作：
bounds.extend(currLatLng);
回答by S.Elavarasan
Center Zoom Depends On Single Marker
中心缩放取决于单个标记
var myCenter=new google.maps.LatLng(38.8106813,-89.9600172);
var map;
var marker;
var mapProp;
function initialize()
{
mapProp = {
center:myCenter,
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map=new google.maps.Map(document.getElementById("map"),mapProp);
marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE,
title:"400 St. Louis Street Edwardsville, IL 62025"
});
marker.setMap(map);
google.maps.event.addListener(map, "zoom_changed", function() {
map.setCenter(myCenter);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
回答by Nicolas78
Computing the right zoom to show all your markers isn't trivial. But there's a function for that: GMap.fitBounds()- you define a bound (for example, the most extreme points of all your marker coordinates) and it sets the map accordingly. See e.g. fitbounds() in Google maps api V3 does not fit bounds(the answer!) for a good example.
计算正确的缩放比例以显示所有标记并非易事。但是有一个函数：GMap.fitBounds()- 您定义一个边界（例如，所有标记坐标的最极端点）并相应地设置地图。参见例如Google maps api V3 中的 fitbounds() 不适合边界（答案！），这是一个很好的例子。
