Центруйте Карти Google (V3) на розмірі веб-переглядача (чуйний)

124

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

ОНОВЛЕННЯ Розпочав роботу точно так, як описано завдяки duncan. Це остаточний код:

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);
});

javascript google-maps google-maps-api-3

— Григорій Болкенстійн
джерело

1

хороша робота! так, вам доведеться постійно виводити поточне центральне значення в глобальний масштаб, щоб його міг підібрати слухач дому

— efwjames

Якщо ви збираєтеся вгорі, зробіть це так, тоді centerне потрібно бути глобальним. Якщо center(і calculateCenter) знаходяться в тому ж обсязі map, що і тоді, все повинно працювати. Звичайно, якщо mapце глобально, то вам теж потрібно це виправити :)

— Roamer-1888,

Можливо, для більшості це очевидно, але цей код з’являється ПІСЛЯ завантаження карти, тому він повинен бути принаймні на windows.onload

— Victoria Ruiz

спасибі, це має бути стандартне поводження google maps

— Yukulélé

143

Потрібно мати слухача подій, коли вікно змінить розмір. Це працювало для мене (поставте його у вашу функцію ініціалізації):

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

— дункан
джерело

Це працює ідеально, дякую! Але якщо хтось перемістив карту, як я можу отримати новий центр карти? Я знайшов функцію getCenter (), але не можу змусити її працювати правильно. map.setCenter (map.getCenter ()); не працює.

— Григорій Болкенштійн

Ви хочете ще одного слухача подій, я думаю, що для "center_changed" на об'єкті карти, який оновлює глобальну змінну з новими координатами, які потім можна використовувати у вашому setCenter.

— duncan

1

Я також спробував це:

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

не працює. Будь-яка допомога буде вдячна.

— Григорій Болкенштійн

Як щодо цього "bounds_changed"?

— duncan

49

Це найпростіший спосіб: hsmoore.com/blog/…

— AO_

83

Виявити подію зміни розміру веб-переглядача, змінити розмір карти 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/ кредит @smftre для посилання.

Примітка. Цей код був пов’язаний у коментарі @ smftre щодо прийнятої відповіді. Я думаю, що варто додати його як власну відповідь, оскільки він справді перевершує прийняту відповідь. Це виключає необхідність глобальної змінної для відстеження центральної точки та обробника подій для оновлення цієї змінної.

— Вільям Денніс
джерело

Погодьтеся з @William, цей метод приводить до більш точного центрального положення при зміні розміру карти.

— десятий поверх

прийнята відповідь не працювала коректно, цей зробив трюк

— Том,

Це найкраще і робоче рішення. Працює над кожною подією зміни розміру Windows. Інші рішення не працювали належним чином.

— zdarsky.peter

1

Це дійсно повинно було розміщуватися як вікі спільноти.

— gustavohenke

Це працює, але я хотів би зрозуміти це більше. Що саме робить google.maps.event.trigger(map, "resize");?

— meduz '26

4

Деякі хороші приклади на w3schools.com. Я використав наступне, і це чудово працює.

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

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

— Стів Мулвіхіл
джерело

0

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);
});

— drjorgepolanco
джерело

0

Оновлено вищезазначене рішення до es6.

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

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

— Девід Бредшоу
джерело

Ви використовуєте як addDomListenerдля window, що є елементом DOM, так і для map, який не є. Об'єкт карти повинен використовувати google.maps.event.addListenerабо власний map.addListenerобробник подій.

— Дункан