Как установить уровень масштабирования карты Google, чтобы показать все маркеры? - PullRequest
Новая
       11

Как установить уровень масштабирования карты Google, чтобы показать все маркеры?

32 голосов
/ 02 марта 2010

Как настроить уровень масштабирования для отображения всех маркеров на Картах Google?

На моей карте Google есть разные маркеры в разных позициях. Я хочу установить уровень масштабирования карты Google на основе диапазона маркеров (это означает, что при просмотре карты Google я хочу видеть все маркеры)

Ответы [ 4 ]

28 голосов
/ 02 марта 2010

Вот, пожалуйста: 

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

22 голосов
/ 23 ноября 2011

Если вы используете API версии 3, вы можете заменить 

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

с 

map.fitBounds(markerBounds).
20 голосов
/ 02 декабря 2013

установить уровень масштабирования карты 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);

Приведенный выше код автоматически центрирует и масштабирует вашу карту, чтобы все маркеры были видны.

2 голосов
/ 02 марта 2010

Вы можете использовать метод extend объекта GLatLngBounds , который представляет прямоугольник на карте. 

var bounds = new GLatLngBounds();

Обведите все точек на карте, расширяя границы вашего объекта GLatLngBounds для каждого. 

bounds.extend(myPoint);

Наконец, вы можете использовать объект Bounds для установки центра и масштаба вашей карты (где map - это объект вашей карты) 

map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...