时间戳

首页 > 解决方案 > Angular 谷歌地图 - 地图信息窗口

javascript - Angular 谷歌地图 - 地图信息窗口

问题描述

我正在开发一个 Angular 应用程序，在该应用程序中实现了 Angular Google Maps (angular-maps.com)。当我点击地图上的一个地方时，它会打开谷歌地图的标准信息窗口。我需要用我的应用程序的一些按钮用自定义信息窗口替换这个标准信息窗口。我不知道如何在角度和角度谷歌地图中做到这一点。有谁知道如何操作这个标准信息窗口，防止它打开和收集所有信息，并将其放在自定义信息窗口中？

我试图在 ngZone 中实现 javascript，以在 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”的函数：

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

直到现在，任何 MARKER 点击我都可以操纵它的信息窗口，但这很容易。我不能做的是从谷歌地图上的地方操纵信息窗口，谷歌地图向你展示的标准兴趣点。我必须将它们放在我的 UI 上，但我需要处理它们的信息，防止标准信息窗口打开，并打开自定义信息窗口。

标签： javascriptangulargoogle-mapsmaps

解决方案

先看看这个： https ://angular-maps.com/api-docs/agm-core/components/agmmap#showDefaultInfoWindow

你想做的是

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

然后默认窗口不会打开，您可以显示自己的信息窗口。

推荐阅读