使用@angular/google-maps如何获取拖拽后marker标记点的经纬度

问题根源 #

1. 你markers数组中存储的是自定义的普通对象，并非<map-marker>对应的官方组件实例，因此调用getPosition()方法会报错。
2. 你没有为<map-marker>绑定拖拽结束事件，组件本身不会自动同步最新坐标到你本地的markers数组，因此打印的永远是初始值。

解决方案 #

步骤1：修改HTML模板，添加拖拽事件绑定 #

给<map-marker>添加dragend事件监听，同时在*ngFor中声明索引：

<google-map *ngIf="pickAddressMode"
            height="500px"
            width="100%"
            [zoom]="zoom"
            [center]="center"
            [options]="options"
            (click)="checkValue()"
            >
              <map-marker
                #markerElem
                *ngFor="let marker of markers; let i = index"
                [position]="marker.position"
                [label]="marker.label"
                [title]="marker.title"
                [options]="marker.options"
                (dragend)="onMarkerDragEnd($event, i)"
                >
            </map-marker>
</google-map>

步骤2：添加拖拽事件处理方法，同步更新本地坐标 #

在TS文件中实现onMarkerDragEnd方法，从事件参数中拿到最新经纬度，更新markers数组对应项的坐标：

import { MapMarker } from '@angular/google-maps';
import { QueryList, ViewChildren } from '@angular/core';

// 可选：如果需要直接获取组件实例调用原生方法，添加ViewChildren声明
@ViewChildren('markerElem') markerElements: QueryList<MapMarker>;

onMarkerDragEnd(event: google.maps.MapMouseEvent, markerIndex: number) {
  // 从事件中直接获取最新坐标
  const newLat = event.latLng.lat();
  const newLng = event.latLng.lng();
  // 更新本地markers数组的坐标
  this.markers[markerIndex].position.lat = newLat;
  this.markers[markerIndex].position.lng = newLng;
}

checkValue() {
  // 现在打印的就是最新坐标
  console.log(this.markers[0].position.lng);
  console.log(this.markers[0].position.lat);
}

// 可选：通过组件实例调用原生getPosition方法获取坐标
getLatestMarkerPos(markerIndex: number) {
  const markerInstance = this.markerElements.toArray()[markerIndex];
  return {
    lat: markerInstance.getPosition().lat(),
    lng: markerInstance.getPosition().lng()
  }
}

其他说明 #

你之前手动new google.maps.Marker不生效的原因是，手动创建的原生Marker实例没有绑定到Angular封装的地图上下文，不需要手动创建原生实例，直接使用<map-marker>组件即可满足需求。

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