Проблема с Google Maps API v3 map.fitbounds (bounds), неправильно настраивающей масштаб карты

Question

Я использую Google Maps API v3 для отображения пешеходных маршрутов, используя данные, извлеченные из файлов GPX, загруженных на мой веб-сайт.

Страница состоит из двух объектов Google Maps, первый отображает все доступные маршруты ивторой покажет маршрут в виде ломаной линии в модале Bootstrap 4.

Мне удалось построить и отобразить точки GPX, и каждая точка расширяет связанный объект.

Однако, когдаЯ вызываю метод fitbounds (), он обычно работает в первый раз и правильно устанавливает масштаб и центр, любые последующие вызовы по тому же маршруту или другому маршруту приведут к неправильному масштабированию.Очень часто угол ЮЗ находится в океане, недалеко от Мексики, и угол СВ, где-то на севере России, когда все маршруты базируются в Великобритании.

mapData.RoutePins содержит объект JSON с координатами широты и долготы.

var routemap = new google.maps.Map(document.getElementById('route'), mapOptions);

var routebounds = new google.maps.LatLngBounds();

mapData.RoutePins.forEach(function (RoutePin) {
    polylinedata.push({ lat: RoutePin.Latitude, lng: RoutePin.Longitude });
    routebounds.extend({ lat: RoutePin.Latitude, lng: RoutePin.Longitude });
});

routemap.fitBounds(routebounds);

polyline = new google.maps.Polyline({
    path: polylinedata,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: routemap
});

Чтобы попытаться найти проблему, я добавил обработчик события bounds_changed, который регистрирует необработанные объекты границ и углы NE / SW связанного объекта на консоли.

google.maps.event.addListener(routemap, 'bounds_changed', function (event) {
    console.log(routemap.getBounds() + "\nNE: " + routebounds.getNorthEast() + "\nSW: " + routebounds.getSouthWest());
});

ОжидаемыйРезультатом является правильно масштабированное и центрированное окно просмотра маршрута, который я наметил, хотя то, что я на самом деле получаю на основе журнала консоли, интересно.

Map Initialized:
getBounds(): ((0, 0), (0, 0))
NE: (-1, -180)
SW: (1, 180)

After fitbounds():
getBounds(): ((15.190468336327566, -97.72890624999991), (74.04118207833291, 96.68515625000009))
NE: (53.7738, -0.44322999999997137)
SW: (53.71267, -0.6005199999999604)

Координаты getBounds представляют то, что на самом деле показано, ноКоординаты NE и SW - это то, что должно отображаться.

Что идет не так?

Answer 1

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

Чтобы попытаться избежать вспышки экрана, когда модальное диалоговое окно исчезает, яПытался запустить все обновления Google Maps до запуска модального режима.

Однако, пока модальный режим закрыт, элемент display имеет значение none, что фактически означает, что размер div равен 0,таким образом, карта визуализируется и масштабируется до области просмотра 0 пикселей.

Для справки в предыдущей версии моего кода использовался фиксированный уровень масштабирования карты, но при этом было немного упущено из-за того, насколько хорошо карта выглядела.

Мое исправление заключается в запуске кода Google Maps, когда модальное окно полностью отображается с использованием $('#routeModal').on('shown.bs.modal', function (event) {, а не $('#routeModal').on('show.bs.modal', function (event) {

Событие show срабатывает немедленно, но показанное событие ждет, пока все переходы css не получатзавершено.Я получаю небольшую вспышку экрана при обновлении элементов, заметно, что предыдущая карта все еще кратко отображается, но она работает.

Мне все еще нужно правильно встроить новую версию обратно на сайт, но я подумал, чтоОтзыв мои выводы пока.