it-swarm.com.ru

Центрирование Карт Google (V3) на изменение размера браузера (отзывчивый)

У меня есть Google Maps (V3) на моей странице со 100% шириной страницы с одним маркером в середине. Когда я изменяю ширину окна моего браузера, я бы хотел, чтобы карта оставалась центрированной (отзывчивой). Теперь карта просто остается в левой части страницы и становится меньше.

ОБНОВЛЕНИЕ Получил, чтобы работать точно так, как описано, благодаря Дункан. Это окончательный код:

var center;
function calculateCenter() {
  center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
  calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
  map.setCenter(center);
});
121
Gregory Bolkenstijn

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

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});
142
duncan

Определите событие изменения размера браузера, измените размеры карты Google, сохранив центральную точку:

var map = ...; // your map initialisation code

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});

Вы можете использовать тот же код в других обработчиках событий при изменении размера карты Google с помощью других средств (например, с помощью элемента управления «изменяемый размер» jQuery-UI).

Источник: http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/ credit to @smftre для ссылки.

Примечание. Этот код был связан в комментарии @ smftre к принятому ответу. Я думаю, что стоит добавить его в качестве собственного ответа, поскольку он действительно превосходит принятый ответ. Это устраняет необходимость глобальной переменной для отслеживания центральной точки и обработчика события для обновления этой переменной. 

83
William Denniss

Несколько хороших примеров на w3schools.com. Я использовал следующее, и это прекрасно работает. 

google.maps.event.addDomListener(window, 'resize', function() {
  map.panTo(myLatlng);
});

http://www.w3schools.com/googleapi/google_maps_events.asp

4
Steve Mulvihill

hTML: создать div с идентификатором по вашему выбору

<div id="map"></div>

js: создайте карту и прикрепите ее к только что созданному div

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: new google.maps.LatLng(-33.890542, 151.274856)
});

Центр, когда окно изменяет размеры

var center = map.getCenter();

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});
0
drjorgepolanco

Обновлено вышеупомянутого решения до es6.

let center;
const addMapListener = google.maps.event.addDomListener;

addMapListener(map, 'idle', () => center = map.getCenter());
addMapListener(window, 'resize', () => map.setCenter(center));
0
David Bradshaw