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

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

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

Ответ 1

Там вы идете:

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

Ответ 2

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

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

с

map.fitBounds(markerBounds).

Ответ 3

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

API карт v3

  • получить маркеры
  • получить границы маркеров
  • установить центр на карте, установив его на границы маркеров

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);

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

Ответ 4

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

var bounds = new GLatLngBounds();

Прокрутите все пункты на вашей карте, расширяя границы вашего объекта GLatLngBounds для каждого из них.

bounds.extend(myPoint);

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

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