Использование setZoom () после использования fitBounds () с Google Maps API V3 - PullRequest
Новая
       9

Использование setZoom () после использования fitBounds () с Google Maps API V3

72 голосов
/ 24 декабря 2010

Я использую fitBounds (), чтобы установить уровень масштабирования на моей карте, а также включить все отображаемые маркеры.Однако, когда у меня виден только один маркер, уровень масштабирования составляет 100% (... уровень масштабирования 20, я думаю ...).Однако я не хочу, чтобы он был настолько увеличен, чтобы пользователь мог регулировать положение маркера без необходимости уменьшать масштаб.

У меня есть следующий код: 

var marker = this.map.createMarker(view.latlng, this.markerNumber);
this.map.bounds.extend(view.latlng);
this.map.map.setCenter(this.map.bounds.getCenter());
this.map.map.fitBounds(this.map.bounds);
if (this.markerNumber === 1) {
  this.map.map.setZoom(16);
}
this.markerNumber++;

, где this.map.bounds был ранее определен как: 

this.map.bounds = new google.maps.LatLngBounds();

Однако у меня проблема в том, чтострока this.map.map.setZoom(16); не работает, если я использую this.map.map.fitBounds(this.map.bounds);, однако я знаю, что строка кода правильная, потому что, когда я закомментирую строку fitBound (), setZoom () волшебным образом начинает функционировать.

Есть идеи, как мне решить эту проблему?Я подумываю установить уровень maxZoom в качестве альтернативы, если я не могу заставить это работать.

Ответы [ 7 ]

108 голосов
/ 17 января 2011

Хорошо, я понял это.Очевидно, что fitbounds () происходит асинхронно, поэтому вам нужно ждать события bounds_changed, прежде чем настройка масштабирования сработает. 

map = this.map.map;

map.fitBounds(this.map.bounds);
zoomChangeBoundsListener = 
    google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
        if (this.getZoom()){
            this.setZoom(16);
        }
});
setTimeout(function(){google.maps.event.removeListener(zoomChangeBoundsListener)}, 2000);

Обновление : см. Ответ @ Nequin с использованием addListenerOnceдля лучшего решения, которое не требует тайм-аута.

94 голосов
/ 16 августа 2012 
google.maps.event.addListenerOnce(yourMap, 'bounds_changed', function(event) {
  if (this.getZoom() > 15) {
    this.setZoom(15);
  }
});

Это решение работает лучше ... вместо ожидания времени ожидания для удаления слушателя.Вызовите это непосредственно перед использованием fitBounds (я думаю, что вызов после будет также работать).

15 голосов
/ 03 октября 2013

Я обнаружил, что дополнительный зум немного дребезжит.Если вы установите параметр maxZoom перед вызовом fitBounds (а затем сбросите его в обратном вызове), вы можете избежать этого:

2 голосов
/ 24 декабря 2010

У меня есть простое и грязное решение.
Использование Если еще ... 

var marker = this.map.createMarker(view.latlng, this.markerNumber);
this.map.bounds.extend(view.latlng);
this.map.map.setCenter(this.map.bounds.getCenter()); 
if (this.markerNumber === 1) {
  this.map.map.setZoom(16);
} else {
   this.map.map.fitBounds(this.map.bounds);
}       
this.markerNumber++;
1 голос
/ 22 февраля 2012

Я только добавил одну строку в функцию addBounds(position), и она исправила это, как показано ниже: 

    addBounds: function(position) {
        this.get('bounds', new google.maps.LatLngBounds()).extend(this._latLng(position));
        this.get('map').fitBounds(this.get('bounds'));
        this.get('map').setZoom(16);//line added
        return this;
    },
0 голосов
/ 23 марта 2018

Все решения со слушателями событий не работали для меня (this.getZoom () всегда неопределен в обратном вызове, а this.setZoom () не действует).

Я придумала это решение, которое хорошо сработало: 

function set_zoom() {
    if(map.getZoom()) {map.setZoom(map.getZoom() - 1);}
    else {setTimeout(set_zoom, 5);}
}
setTimeout(set_zoom, 5);
0 голосов
/ 11 февраля 2018

Я думаю, что правильный способ сделать это - установить уровень масштабирования после map.fitBounds(bounds). Просто добавьте map.setZoom(16) после map.fitBounds(bounds). У меня отлично работает.

...