Javascript 如何设置 Google 地图缩放级别以显示所有标记？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2362337/
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
How to set the Google Map zoom level to show all the markers?
提问by Alex
How do I set the zoom level to show all the markers on Google Maps?
如何设置缩放级别以显示 Google 地图上的所有标记？
In my Google Map there are different markers in different positions. I want to set google map zoom level based on the range of markers (that means in the view of google map, i want to see all markers)
在我的谷歌地图中，不同位置有不同的标记。我想根据标记范围设置谷歌地图缩放级别（这意味着在谷歌地图的视图中，我想查看所有标记）
采纳答案by Daniel Vassallo
There you go:
你去吧：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps getBoundsZoomLevel Demo</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var markerBounds = new GLatLngBounds();
for (var i = 0; i < 10; i++) {
var randomPoint = new GLatLng( 39.00 + (Math.random() - 0.5) * 20,
-77.00 + (Math.random() - 0.5) * 20);
map.addOverlay(new GMarker(randomPoint));
markerBounds.extend(randomPoint);
}
map.setCenter(markerBounds.getCenter(),
map.getBoundsZoomLevel(markerBounds));
}
</script>
</body>
</html>
We are creating 10 random points in the above example and then passing each point to GLatLngBounds.extend(). Finally we get the correct zoom level with GMap2.getBoundsZoomLevel().
我们在上面的例子中创建了 10 个随机点，然后将每个点传递给GLatLngBounds.extend()。最后我们得到正确的缩放级别GMap2.getBoundsZoomLevel()。
回答by Steve
If you are using API version 3 you can replace
如果您使用的是 API 版本 3，则可以替换
map.setCenter(markerBounds.getCenter(), map.getBoundsZoomLevel(markerBounds));
with
和
map.fitBounds(markerBounds).
回答by lfender6445
set the Google Map zoom level to show all the markers?
设置谷歌地图缩放级别以显示所有标记？
Maps API v3
地图 API v3
- get markers
- get boundaries of markers
- set center on map by fitting it to marker boundaries
- 获得标记
- 获取标记的边界
- 通过将其拟合到标记边界来在地图上设置中心
var markers = [markerObj1, markerObj2, markerObj3];
var newBoundary = new google.maps.LatLngBounds();
for(index in markers){
var position = markers[index].position;
newBoundary.extend(position);
}
map.fitBounds(newBoundary);
The code above will automaticlly center and zoom your map so that all markers are visible.
上面的代码将自动居中并缩放您的地图，以便所有标记都可见。
回答by RYFN
You can use the extendmethod of the GLatLngBoundsobject, which represents a rectangle on the map.
您可以使用GLatLngBounds对象的extend方法，该对象表示地图上的一个矩形。
var bounds = new GLatLngBounds();
Loop around all the pointson your map, extending the bounds of your GLatLngBounds object for each one.
环绕地图上的所有点，为每个点扩展 GLatLngBounds 对象的边界。
bounds.extend(myPoint);
Finally you can use your bounds object to set the centre and zoom of your map (where mapis your map object)
最后，您可以使用 bounds 对象设置地图的中心和缩放（map您的地图对象在哪里）
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
