Angular Google Maps - Информационные окна карт

Я работаю над угловым приложением, в котором я реализовал Angular Google Maps (angular-maps.com). Когда я нажимаю на место на карте, открывается стандартное информационное окно гугл карт. Мне нужно заменить это стандартное информационное окно пользовательским информационным окном с некоторыми кнопками моего приложения. Я не знаю, как это сделать внутри угловых и угловых карт Google. Кто-нибудь знает, как манипулировать этим стандартным информационным окном, предотвратить его открытие и сбор всей имеющейся на нем информации и поместить его в пользовательское информационное окно?

Я пытался реализовать javascript внутри ngZone, чтобы запустить его за пределами angular, но безуспешно, я пытался найти какую-то предварительно созданную директиву в картах angular, но я не смог ее найти

это код, который инициализирует карту:

 ngOnInit() {
this.mapsAPILoader.load().then(
  () => {
    const autocomplete = new google.maps.places.Autocomplete(this.searchElement.nativeElement, {types: ['establishment'] });
    autocomplete.addListener('place_changed', () => {
      this.ngZone.run(() => {
        const place: google.maps.places.PlaceResult = autocomplete.getPlace();
        if (place.geometry === undefined || place.geometry === null) { return; } else {
          const poi: Poi = {
            uid: place.place_id,
            title: place.name,
            coords: {lat: place.geometry.location.lat(), lng: place.geometry.location.lng()},
            draggable: false,
        };
          this.temporaryMarker(poi);
        }
      });
    } );
  }
);

}

это моя функция, которая обрабатывает "mapClick" угловых карт Google:

 mapClicked(e: MouseEvent) {
console.log('mapClicked()=>', e);
if (e.placeId) {
  this.getPlaceDetails(e.placeId).subscribe(place => this.openInfoWindow(place));
}
this.clickedLat = e.coords.lat;
this.clickedLng = e.coords.lng;
this.infoWindowIsOpen = true;
const preventInfoWindow = // HERE IS WHERE I SUPPOSE THAT SHOULD HAVE MY CODE
// service.getDetails(request, this.openInfoWindow(place, status));
  }

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

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
0
214
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сначала посмотрите на это: https://angular-maps.com/api-docs/agm-core/components/agmmap#showDefaultInfoWindow

Что вы хотите сделать, это

<agm-map [showDefaultInfoWindow]="false" (click)="mapClicked($event)">

Тогда окно по умолчанию не откроется, и вы можете показать свое собственное информационное окно.

Другие вопросы по теме