简体   繁体   English

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

[英]How to set the Google Map zoom level to show all the markers?

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. 在我的Google地图中,不同位置有不同的标记。 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) 我想根据标记的范围设置谷歌地图缩放级别(这意味着在谷歌地图的视图中,我想看到所有标记)

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&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>

We are creating 10 random points in the above example and then passing each point to GLatLngBounds.extend() . 我们在上面的例子中创建了10个随机点,然后将每个点传递给GLatLngBounds.extend() Finally we get the correct zoom level with GMap2.getBoundsZoomLevel() . 最后,我们使用GMap2.getBoundsZoomLevel()获得正确的缩放级别。

谷歌地图getBoundsZoomLevel演示

If you are using API version 3 you can replace 如果您使用的是API版本3,则可以替换

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

with

map.fitBounds(markerBounds).

set the Google Map zoom level to show all the markers? 设置Google地图缩放级别以显示所有标记?

Maps API v3 Maps API v3

  1. get markers 得到标记
  2. get boundaries of markers 获得标记的边界
  3. 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. 上面的代码将自动居中并缩放地图,以便所有标记都可见。

You can use the extend method of the GLatLngBounds object, which represents a rectangle on the map. 您可以使用GLatLngBounds对象的extend方法,该方法表示地图上的矩形。

var bounds = new GLatLngBounds();

Loop around all the points on 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 map is your map object) 最后,您可以使用bounds对象设置地图的中心和缩放( map是地图对象)

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何设置Google Map缩放级别以在中心显示所有标记和用户? - How to set the Google Map zoom level to show all the markers and user at center? 如何设置地图缩放以在选项卡引导中显示所有标记? - How to Set Zoom of Map to show all markers in tabpage Bootstrap? 如何动态设置最大缩放级别以适合Google地图中的标记列表? - How to set the maximum zoom level dynamically to fit a list of markers in google-map? 如何设置地图缩放以覆盖可见标记的所有标记? - How to Set Zoom of Map to cover all markers visible Markers? Fluster 2如何以特定的缩放级别显示所有标记 - Fluster 2 how to show all markers at a specific zoom level 如何在谷歌地图中设置缩放级别 - How to set zoom level in google map 如何设置 Leaflet 地图的缩放以显示 React Leaflet 中的所有标记? - How to Set Leaflet Map's Zoom to Show All Markers in React Leaflet? 如何设置谷歌 Map 的中心和缩放以覆盖从 Wordpress 数据库生成的所有标记 - How to set center and zoom of Google Map to cover all markers generated from Wordpress database 放大Google地图标记 - zoom in on google map markers 如何将Google地图缩放到一定比例的标记 - How to zoom a Google map to a percentage of markers
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM