Автоматическая регулировка масштабирования для размещения всех маркеров на карте Google

Используя последнюю версию Google Maps. Как добавить маркеры с использованием долготы и широты и автоматически настроить уровень масштабирования карты, чтобы включить все маркеры с помощью JavaScript?


google-maps javascript google-maps-api-3 google-maps-markers
person TrustyCoder    schedule 09.10.2010    source источник

Ответы (3)


arrow_upward
86
arrow_downward

Google Maps API v3 предоставляет LatLngBounds объект, к которому вы можете добавить несколько LatLng объектов. Затем вы можете передать это в функцию Map.fitBounds(), как описано здесь:

Частичный пример

var latlng = [
    new google.maps.LatLng(1.23, 4.56),
    new google.maps.LatLng(7.89, 1.01),
    // ...
]; 
var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < latlng.length; i++) {
    latlngbounds.extend(latlng[i]);
}
map.fitBounds(latlngbounds);
person Salman A    schedule 11.10.2010
comment
Кстати: при работе с массивом маркеров вы можете получить положение маркеров с помощью метода getPosition(). - person piotr_cz; 04.03.2016

arrow_upward
25
arrow_downward

Вы добавляете маркеры на карту Google, создавая маркер. объект для каждой из ваших пар широта / долгота:

var marker = new google.maps.Marker({
    position: currentLatLng, 
    map: map,
    title:"Title!"
});

Параметр map в конструкторе маркеров связывает новый рыночный объект с вашей картой.

Чтобы изменить масштаб карты и включить в нее новые маркеры, используйте метод fitBounds для объект карты. fitBounds принимает в качестве параметра объект latLngBounds. У этого объекта есть удобный метод extend, который скорректирует границы, чтобы включить новую широту / долготу. Итак, вам просто нужно прокрутить все свои точки, вызывая extend для одного объекта latLngBounds. Это расширит границы, чтобы включить все ваши маркеры. После этого вы передаете этот объект в метод fitBounds в карта, и она будет увеличена, чтобы показать все ваши новые маркеры.

person RedBlueThing    schedule 10.10.2010
comment
хотя вы предоставили правильный ответ первым ... как обычно, большинство точек было связано с другим таким же ответом, в котором на самом деле был пример кода .. - person abbood; 08.06.2014
comment
@abbood Спасибо за подсказку;) - person RedBlueThing; 11.06.2014

arrow_upward
2
arrow_downward

Следующее помогло мне

map.fitBounds(bounds);


 // add a zoom to the map


var listener = google.maps.event.addListener(map, 'idle', function()
        {
          if(map.getZoom() > 16)
            map.setZoom(17);
          google.maps.event.removeListener(listener);
        });

Установите желаемый масштаб в методе setZoom (). Чем больше значение, тем шире отображаются детали местоположения, тем меньше значение, оно сокращает и сжимает детали местоположения.

person Jose Mhlanga    schedule 26.10.2019