@angular/google-maps中AdvancedMarkerElement的mapDblclick事件无法触发的解决求助
@angular/google-maps中AdvancedMarkerElement的mapDblclick事件无法触发的解决求助
我目前在使用@angular/google-maps的AdvancedMarkerElement来在谷歌地图上展示自定义标记,单点击事件(mapClick)能正常触发并处理,但双击事件(mapDblclick)却完全没反应——哪怕是用一个不带自定义DOM元素的简单标记测试也是如此。
以下是我的组件最小复现代码:
组件TypeScript代码
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-maps-viewer', templateUrl: './maps-viewer.component.html', }) export class MapsViewerComponent implements OnInit { options: google.maps.MapOptions = { disableDoubleClickZoom: false, mapTypeId: 'roadmap', }; markerOptions: google.maps.marker.AdvancedMarkerElementOptions = { gmpClickable: true, }; public markers: MapsMarker[] = [...]; // 此处为我的标记数据数组 public onMarkerClick(id: string) { console.log('click', id); } public onMarkerDblclick(id: string) { console.log('double click', id); } // 生成自定义标记内容的方法 getPin(iconClass: string, color: string, title: string) { // 此处为生成自定义DOM元素的逻辑 } }
组件HTML模板
<google-map #mapElm height="100%" width="100%" [options]="options"> <map-advanced-marker *ngFor="let marker of markers" [position]="marker.position" [title]="marker.title" [content]="getPin(marker.iconClass, marker.color, marker.title)" [options]="markerOptions" (mapClick)="onMarkerClick(marker.id)" (mapDblclick)="onMarkerDblclick(marker.id)"> </map-advanced-marker> <!-- 用于测试的简单标记 --> <map-advanced-marker title="Test Marker Lille" [position]="{ lat: 50.62925, lng: 3.057256 }" [options]="markerOptions" (mapClick)="onMarkerClick('lille-test-simpleClick')" (mapDblclick)="onMarkerDblclick('lille-test-doubleClick')"> </map-advanced-marker> </google-map>
我已经尝试过的方案
- 同时测试了带自定义HTMLElement(通过
[content]传入)的标记和无自定义内容的简单标记,双击事件都无法触发 - 已经在标记选项中设置了
gmpClickable: true - 地图选项中也设置了
disableDoubleClickZoom: false,确保不是地图的双击缩放功能抢占了事件
我现在需要实现同时处理AdvancedMarkerElement的单击和双击事件,请问该怎么解决(mapDblclick)事件无法触发的问题?
内容来源于stack exchange
相关产品推荐
相关产品推荐

