logo标签列表

如何设置谷歌地图缩放级别以显示所有标记？

javascriptgoogle-maps
40

如何在谷歌地图上设置缩放级别以显示所有标记？

我的谷歌地图中有不同位置的不同标记。我想根据标记的范围设置谷歌地图的缩放级别（也就是说，在谷歌地图的视图中，我希望能够看到所有标记）。

4个回答
33

在这里：

<!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&amp;v=2&amp;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>

我们在上面的例子中创建了10个随机点，然后将每个点传递给GLatLngBounds.extend()。最后，我们使用GMap2.getBoundsZoomLevel()获得正确的缩放级别。

Google Maps getBoundsZoomLevel Demo

26

如何设置Google地图的缩放级别以显示所有标记？

Maps API v3

  1. 获取标记
  2. 获取标记边界
  3. 通过适应标记边界来在地图上设置中心点
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);

上述代码将自动居中和缩放您的地图，以便所有标记都可见。

24

如果您正在使用API版本3，您可以将

替换为
。

map.setCenter(markerBounds.getCenter(), map.getBoundsZoomLevel(markerBounds));

与

map.fitBounds(markerBounds).
3
你可以使用GLatLngBounds对象的extend方法，该对象表示地图上的矩形。
var bounds = new GLatLngBounds();

循环遍历地图上的所有点，为每个点扩展GLatLngBounds对象的边界。
bounds.extend(myPoint);

最后，您可以使用边界对象来设置地图的中心和缩放级别（其中map是您的地图对象）

map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接