Получите границы карты google v3 после изменения масштаба

Question

Я пытаюсь получить границы карты после изменения масштаба, , но событие zoom_changed срабатывает до Оценки были пересчитаны. Поэтому в обработчике zoom_changed вы получаете предыдущие оценки, а не новые границы.

Есть ли способ получить правильные границы при изменении масштаба?

Answer 1

От API documentation:

Если вы пытаетесь обнаружить изменение в окне просмотра, обязательно использовать специальное событие bounds_changed, а не составной zoom_changed и center_changed событий. Поскольку API Карт запускает эти события независимо друг от друга, get_bounds() может не сообщать о полезных результатах до тех пор, пока авторитетная версия окна просмотра не изменится. Если вы хотите get_bounds() после такого события, обязательно прослушайте событие bounds_changed.

Answer 2

Это bug, пожалуйста, напишите эту проблему, если вы заинтересованы.

Существует уродливая обходной путь для этого:

google.maps.event.addListener(map, 'zoom_changed', function() { 
    google.maps.event.addListenerOnce(map, 'bounds_changed', function (e) { 
      my_zoom_handler(); // do your job here 
    }); 
}); 

Answer 3

Чтобы связать bounds_changed и работать с маркерами/карты материала после масштабирования используйте:

google.maps.event.addListener(map, 'zoom_changed', function() { 
    this.zoomChanged = true; 
}); 

google.maps.event.addListener(map,"bounds_changed",function() { 
    if (this.zoomChanged) { 
     this.zoomChanged = false; 
     // DO YOUR STUFF 
    } 
}); 

Answer 4

У меня была такая же проблема. Вот что я, наконец, получил, чтобы решить некоторые из проблем, которые у меня были с другими решениями.

* Правильно навязывает границы независимо от того, используете ли вы мышь или клавиши со стрелками

* Не остановятся края, если удерживать нажатой клавиши со стрелками, из-за кастрюли ускорения, заставляя его «выброс» (попробуйте удерживать клавишу со стрелкой в ​​одном направлении, пока вы не нажмете край, затем отпустите и снова нажмите ее), а с некоторыми решениями она будет прокручиваться чуть больше)

* Не отскакивает назад, когда он попадает в край

* Правильно применяет ограничения при изменении масштаба

EDIT: Хорошо, поэтому он работает, когда вы изменяете масштаб с помощью колесика прокрутки, но не с помощью регулятора зуммирования. Позвольте мне немного поиграть с ним, и я посмотрю, смогу ли я это сделать тоже ...

EDIT 2: Оказывается, проблема в том, что я удалил элемент управления панорамированием. Пока присутствует управление панорамированием, это отлично работает, как с колесиком прокрутки, так и с регулятором зуммирования.

РЕДАКТИРОВАТЬ 3: Нет ... это не так. Я обновил код для управления зуммированием.

// bounds of the desired area 
var allowedBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(-64, -64), 
        new google.maps.LatLng(64, 64) 
        ); 

var zoomChanged = false; 

google.maps.event.addListener(map, 'center_changed', function() { 
    var mapBounds = map.getBounds(); 

    if(mapBounds.getNorthEast().lat() > allowedBounds.getNorthEast().lat()) { 
    var newCenter = new google.maps.LatLng(map.getCenter().lat() - 
              (mapBounds.getNorthEast().lat() - 
              allowedBounds.getNorthEast().lat()), 
              map.getCenter().lng(), true); 
    map.panTo(newCenter); 
    return; 
    } 

    if(mapBounds.getNorthEast().lng() > allowedBounds.getNorthEast().lng()) { 
    var newCenter = new google.maps.LatLng(map.getCenter().lat(), 
              map.getCenter().lng() - 
              (mapBounds.getNorthEast().lng() - 
              allowedBounds.getNorthEast().lng()), true); 
    map.panTo(newCenter); 
    return; 
    } 

    if(mapBounds.getSouthWest().lat() < allowedBounds.getSouthWest().lat()) { 
    var newCenter = new google.maps.LatLng(map.getCenter().lat() + 
              (allowedBounds.getSouthWest().lat() - 
              mapBounds.getSouthWest().lat()), 
              map.getCenter().lng(), true); 
    map.panTo(newCenter); 
    return; 
    } 

    if(mapBounds.getSouthWest().lng() < allowedBounds.getSouthWest().lng()) { 
    var newCenter = new google.maps.LatLng(map.getCenter().lat(), 
              map.getCenter().lng() + 
              (allowedBounds.getSouthWest().lng() - 
              mapBounds.getSouthWest().lng()), true); 
    map.panTo(newCenter); 
    return; 
    } 
}, this); 

google.maps.event.addListener(map, 'zoom_changed', function() { 
    zoomChanged = true; 
}, this); 

google.maps.event.addListener(map, 'bounds_changed', function() { 
    if(zoomChanged) { 
    var mapBounds = map.getBounds(); 

    if(mapBounds.getNorthEast().lat() > allowedBounds.getNorthEast().lat()) { 
     var newCenter = new google.maps.LatLng(map.getCenter().lat() - 
              (mapBounds.getNorthEast().lat() - 
              allowedBounds.getNorthEast().lat()), 
              map.getCenter().lng(), true); 
     map.panTo(newCenter); 
     return; 
    } 

    if(mapBounds.getNorthEast().lng() > allowedBounds.getNorthEast().lng()) { 
     var newCenter = new google.maps.LatLng(map.getCenter().lat(), 
              map.getCenter().lng() - 
              (mapBounds.getNorthEast().lng() - 
              allowedBounds.getNorthEast().lng()), true); 
     map.panTo(newCenter); 
     return; 
    } 

    if(mapBounds.getSouthWest().lat() < allowedBounds.getSouthWest().lat()) { 
     var newCenter = new google.maps.LatLng(map.getCenter().lat() + 
              (allowedBounds.getSouthWest().lat() - 
              mapBounds.getSouthWest().lat()), 
              map.getCenter().lng(), true); 
     map.panTo(newCenter); 
     return; 
    } 

    if(mapBounds.getSouthWest().lng() < allowedBounds.getSouthWest().lng()) { 
     var newCenter = new google.maps.LatLng(map.getCenter().lat(), 
              map.getCenter().lng() + 
              (allowedBounds.getSouthWest().lng() - 
              mapBounds.getSouthWest().lng()), true); 
     map.panTo(newCenter); 
     return; 
    } 

    zoomChanged = false; 
    } 
}, this);