You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

@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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.07 09:12:56