Почему центрирование моей карты отключено в приложении jQuery Mobile / Google Maps API3?

Question

В моем веб-приложении jQuery Mobile есть карта на основе Google Maps J3 API3.Я добавил круг с черными границами на нем.

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

http://goo.gl/XvLST

Если вы сначала зайдете на эту домашнюю страницу моего приложения (http://goo.gl/0IWgE), а затем перейдете на страницу с картой, карта будет

1. по центру ошибочно (карта должна быть в центре по центру круга).
2. отсутствует вся область, покрытая серым.

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

Я просто не мог использовать Ajaxзагрузить страницу карты с помощью data-ajax='false'. Однако на самом деле я не могу этого сделать, потому что мобильное приложение не допускает загрузки без поддержки AJAX.

google.maps.event.trigger(map, 'resize'), кажется, перемещает карту, когда я вхожу в нееКонсоль Chrome Web Developer, но я не уверен, где ее можно назвать в моем JavaScript.

Answer 1

Поскольку страница фактически загружается через ajax (при поступлении из индекса) - используемое вами событие страницы, вероятно, вызывается до того, как DOM будет полностью готов. GMaps ожидают, что страница будет готова.

Попробуйте использовать другое событие, кроме pageinit. Похоже, страница-показ может быть хорошей (поскольку она запускается после завершения анимации) http://jquerymobile.com/demos/1.0/docs/api/events.html

Или, может быть, вы можете поместить вызов в событие изменения размера карты, в событие просмотра страницы.

Answer 2

Перезагружается ли страница между домашней страницей и картой?Если нет, и если вы создаете или изменяете размер div, вам нужно будет вызвать google.maps.event.trigger(map, 'resize') после изменения div (изменение размера или удаление отображения: нет).(отредактировано, чтобы показать код для запуска события, благодаря @Heitor Chang)

Answer 3

В моем случае мой обходной путь - $('#mapdiv').trigger('create'); работает хорошо.но в других случаях я не знаю, как это работает.

Answer 4

Звоните google.maps.event.trigger(mapObj, "resize"); на pageshow или pagechange