Ionic4 - Angular - GoogleMaps - Как изменить видовой экран фоновой карты Google в соответствии с показанными компонентами? - PullRequest
Новая
       47

Ionic4 - Angular - GoogleMaps - Как изменить видовой экран фоновой карты Google в соответствии с показанными компонентами?

0 голосов
/ 17 июня 2019

Я разрабатываю приложение Ionic / Angular, которое реализует GoogleMaps.

Я хочу, чтобы в моем приложении всегда была полноэкранная карта Google на фоне. Я хочу, чтобы компоненты отображались поверх него, но я хочу, чтобы Карты Google всегда возвращали мне правильные координаты цели / центра.

Это небольшое изображение, объясняющее мою проблему: enter image description here

Уже опробованные решения:

  1. Если бы я установил на Ionic свою карту в полноэкранном режиме с ионным содержимым (что означает, что она расширяется за верхним и нижним колонтитулом), у меня не было бы доступа к правильному показанному центру. Кроме того, логотип Google не будет виден, что нарушает их политику.

  2. Поместите верхний колонтитул / содержимое / нижний колонтитул в карту div. Это не работает Я не могу объяснить, почему.

Есть ли в Google Maps js API инструмент редактирования видов, который я просто не нашел?

1 Ответ

0 голосов
/ 18 июня 2019

решено

Поскольку полноэкранный режим содержания ионов пока не работает (возможно, этот ответ необходимо исправить в будущем), я решил отказаться отИонные теги.

Чтобы создать функциональный фон Google Map, я взял его div в качестве корня.Внутри я поместил 3 элемента div, чтобы сделать заголовок, содержимое и нижний колонтитул, как описано в этом посте:

Как создать элемент div, чтобы заполнить все пространство между верхним и нижним колонтитулом div

Думал, что это сработало, но мои Карты Google больше не могли взаимодействовать с пользователем, потому что div контента ловил события касания.Итак, я следовал этому трюку и выполнил работу за меня:

HTML-оверлей, который позволяет кликам падать на элементы позади него

Наконец, чтобы изменить свойРазмер области просмотра карты без изменения реального размера карты. Я использовал функцию заполнения, включенную в API Карт, которая поддерживает только камеру, а не весь вид Карт:

API Карт Google JS - Карта

(Лично я использовал интерфейс GoogleMapOptions ionic-native / google-maps, но все еще с той же функцией)

Надеюсь, это кому-нибудь поможет.

...