Google Maps JS API - Как использовать fitBounds для гибкой карты?

Я пытаюсь показать определенную область на карте на отзывчивом веб-сайте. Я хочу, чтобы он отображал ту же область при загрузке, независимо от размера окна, путем увеличения и уменьшения масштаба. После некоторых исследований я понял, что мне нужно использовать функцию fitBounds API JS API Google Maps, но не могу заставить его работать. Вот мой код до сих пор:Google Maps JS API - Как использовать fitBounds для гибкой карты?

<div id="map"></div><!--css rules to make it a 16/9 responsive box--> 
<script src="https://maps.googleapis.com/maps/api/js?key=mykey" type="text/javascript"></script> 
<script type="text/javascript"> 
function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(x, y), //any coordinates I put here don't matter, as I need the map to adjust using bounds, right? 
     zoom: 11 
    }; 
    var bounds = google.maps.LatLngBounds(
     new google.maps.LatLng(x, y), //SW coordinates here 
     new google.maps.LatLng(x, y) //NE coordinates here 
    ); 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
    map.fitBounds(bounds); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
google.maps.event.addDomListener(window, "resize", function() { 
    var bounds = map.getBounds(); 
    google.maps.event.trigger(map, "resize"); 
    map.fitBounds(bounds); 
}); 
</script>

Кажется, карта просто показывает положение центра в настройках, и игнорирование вызова fitBounds. Что мне не хватает/не так?

источник

2015-02-21 Aise

Вы в настоящее время извлечения границы карты до ее имели возможности изменить размер

Вам нужно добавить дополнительный обработчик для отображения изменения размера события, а затем переместить fitBounds код в это. По-прежнему сохраняйте триггер изменения размера карты в обработчике изменения размера окна.

Редактировать

Вы должны переместить переменную карту за пределами вашей функции инициализации так ее глобально доступным для ваших карты слушателей

источник

2015-02-21 17:58:27 mindparse

Извините, но я не понимаю. Вы хотите вытащить функцию fitBound из inizialize(), поместить ее в новую функцию и вызвать ее из нового слушателя? Я пробовал, но все равно ничего ... Кроме функции события изменения размера, кажется, что fitBounds просто ничего не делает, когда он вызван при загрузке. – Aise

Хорошо, я нахожу большую глупую ошибку: в строке 'var bounds = google.maps.LatLngBounds' я забыл' new'! Сожалею! – Aise

Ах да, я пропустил это, также посмотрю мое недавнее редактирование, вам также нужно будет сделать это, чтобы вы могли получить доступ к карте в другом месте в своих функциях. – mindparse

Вот как это может быть реализовано (с помощью окна JQuery изменения размера события):

function initialize() { 
    var mapOptions = { 
    center: new google.maps.LatLng(x, y), 
    zoom: 11 
    }; 
    var bounds = google.maps.LatLngBounds(
    new google.maps.LatLng(x, y), //SW coordinates here 
    new google.maps.LatLng(x, y) //NE coordinates here 
); 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
    map.fitBounds(bounds); 

    // Listen for events after map initialization 
    $(window).resize(function() { 
    google.maps.event.trigger(map, 'resize'); 
    }); 

    google.maps.event.addListener(map, 'resize', function() { 
    var bounds = map.getBounds(); 
    map.fitBounds(bounds); 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize);

источник

2016-08-26 14:01:29 jmarceli

Google Maps JS API - Как использовать fitBounds для гибкой карты?

ответ

Смежные вопросы