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

Я использую 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 = new google.maps.LatLngBounds();

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

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

7 71
javascript google-maps google-maps-api-3 google-maps-markers

7 ответов:

- хорошо, я все понял. По-видимому, 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 для лучшего решения, которое не требует ожидания.

107
google.maps.event.addListenerOnce(yourMap, 'bounds_changed', function(event) {
  if (this.getZoom() > 15) {
    this.setZoom(15);
  }
});

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

91

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

map.setOptions({
    maxZoom: 10
});

map.setCenter(new google.maps.LatLng(-89, -179)); // make sure it changes so the idle listener gets called back

map.fitBounds(bounds);

var listener = google.maps.event.addListenerOnce(map, "idle", function()
{
    map.setOptions({
        maxZoom: 999
    });
});
14

У меня есть простое и грязное решение.
Используйте если еще ... 

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++;
2

Я только что добавил одну строку в функцию 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;
    },
1

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

0

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

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

function set_zoom() {
    if(map.getZoom()) {map.setZoom(map.getZoom() - 1);}
    else {setTimeout(set_zoom, 5);}
}
setTimeout(set_zoom, 5);
0