Angular 18中@angular-google-maps无法拖拽多边形顶点绘制问题

问题描述 #

在Angular 18项目中使用@angular/google-maps@^18.2.3组件，右键唤起自定义菜单点击“Draw polygon”绘制多边形后，无法拖拽顶点调整形状——拖拽顶点时整个地图会跟着移动，而非多边形顶点。

相关代码 #

组件逻辑代码 #

public drawNewPolygon(): void {
    const newPolygon: MapPolygonInterface = {
      points: [
        this.rightClickLastPosition, 
        { lat: this.rightClickLastPosition.lat + 0.001, lng: this.rightClickLastPosition.lng + 0.001 }
      ],
      fillColor: this.mapPolygonFillColor,
      strokeColor: this.mapPolygonStrokeColor,
      strokeWeight: 5,
      isEditable: true,
      isDraggable: true
    };
    this.mapPolygons.push(newPolygon);
    this.emitPolygons.emit(this.mapPolygons);
    console.log("New polygon drawn", this.mapPolygons);
  }

模板代码 #

<google-map
  height="100vh"
  width="100%"
  [center]="center"
  [zoom]="zoom"
  [fullscreenControl]="false"
  [streetViewControl]="false"
  [mapTypeControl]="false"
  (mapClick)="handleMapClick($event)"
  (mapRightclick)="mapRightClicked($event)"
  (contextmenu)="onContextMenuRightClick($event)"
>
  <map-marker
    *ngFor="let marker of mapMarkers"
    [position]="marker"
    [title]="'Marker Title'"
    (markerClick)="onMarkerClick($event)"
    [options]="markerOptions">
  </map-marker>

  <map-polygon
  *ngFor="let polygon of mapPolygons; let index = index"
  [paths]="polygon.points"
  [polyDraggable]="true"
  [editable]="true"
  [draggable]="true"
  (polyPathsChange)="polyPathsChange($event, index)"
  (polyDblClick)="polyClickEdit($event, polygon, index)"
  (polyRightClick)="polyRightClick($event, polygon, index)"
  (polyMouseOver)="polyHover($event, polygon)"
  (polyMouseOut)="polyMouseOut($event, polygon)"
  (polyDragEnd)="polyDragEnd($event)"
  [zIndex]="999999"
  [options]="{
    strokeColor: polygon.strokeColor,
    strokeWeight: 10,
    fillColor: polygon.fillColor,
    fillOpacity: 0.35
  }">
  </map-polygon>


  <map-polyline
    *ngFor="let polyline of mapPolylines"
    [path]="polyline.points"
    [options]="{
        strokeColor: polyline.color,
      }"
    (polyPathChange)="polyPathChange($event)"
  >
  </map-polyline>
</google-map>

解决方案 #

问题集中在数据类型匹配和事件冲突两个核心点，按以下步骤修复：

1. 使用Google Maps原生坐标类型 #

Angular Google Maps组件要求多边形顶点必须是google.maps.LatLng实例或标准LatLngLiteral格式，不能用自定义的lat/lng对象。修改drawNewPolygon方法：

import { google } from '@angular/google-maps';

public drawNewPolygon(): void {
  const newPolygon: MapPolygonInterface = {
    points: [
      new google.maps.LatLng(this.rightClickLastPosition.lat, this.rightClickLastPosition.lng),
      new google.maps.LatLng(this.rightClickLastPosition.lat + 0.001, this.rightClickLastPosition.lng + 0.001)
    ],
    fillColor: this.mapPolygonFillColor,
    strokeColor: this.mapPolygonStrokeColor,
    strokeWeight: 5,
    isEditable: true,
    isDraggable: true
  };
  this.mapPolygons.push(newPolygon);
  this.emitPolygons.emit(this.mapPolygons);
}

2. 阻止顶点拖拽事件冒泡到地图 #

拖拽顶点时事件会冒泡到地图容器，触发地图拖拽行为。在map-polygon上添加polyMouseDown事件来阻止冒泡：

<map-polygon
  *ngFor="let polygon of mapPolygons; let index = index"
  [paths]="polygon.points"
  [editable]="true"
  [draggable]="true"
  (polyPathsChange)="polyPathsChange($event, index)"
  (polyMouseDown)="onPolyVertexMouseDown($event)"
  [options]="{
    strokeColor: polygon.strokeColor,
    strokeWeight: 10,
    fillColor: polygon.fillColor,
    fillOpacity: 0.35
  }">
</map-polygon>

然后在组件中实现事件处理：

onPolyVertexMouseDown(event: google.maps.PolyMouseEvent): void {
  // 仅在点击顶点时阻止冒泡
  if (event.vertex !== undefined) {
    event.domEvent.stopPropagation();
  }
}

3. 移除无效属性 #

模板中map-polygon的[polyDraggable]并非官方文档定义的输入属性，属于冗余配置，直接移除避免和[draggable]属性冲突。

关键说明 #

• Angular Google Maps组件深度依赖Google Maps原生API，所有地理坐标必须使用官方指定的类型，否则会导致交互逻辑失效。
• 地图组件的事件冒泡是常见交互冲突点，针对顶点、图形的操作事件需要手动拦截，避免触发地图的默认拖拽行为。

内容的提问来源于stack exchange，提问作者Viira