@angular/google-maps 如何在拖动标记后获取标记的纬度和经度？

Question

我正在 Angular 上实现 @angular/google-maps 官方组件。 我的问题是获取新添加的标记的 lat 和 lng 值：

我的实现与这个https://timdeschryver.dev/blog/google-maps-as-an-angular-component 完全相同。 我的问题是我似乎无法更新这个值。

我的 HTML：

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

我的 JS：

addMarker(data) {
  this.markers = [];
  const coords = data;
  this.center = coords;


  this.markers.push({
    position: {
      ...coords
    },
    options: {
      draggable: true,
      animation: google.maps.Animation.DROP,
    },
  });

  const marker = this.markers[0];

}

如果我登录：

checkValue() {
    console.log(this.markers[0].position.lng);
    console.log(this.markers[0].position.lat);
}

它总是一样的。

我试图得到这样的值：

var lat = this.markers[0].getPosition().lat();
var lng = this.markers[0].getPosition().lng();

但它会引发错误。

ReportPage.html:122 ERROR TypeError: this.markers[0].getPosition is not a function

如何更新此值？

我的“脏”解决方法如下，获取 map 的中心。 我可以看到它正在更新的值。

  return JSON.stringify(this.map.getCenter());

我可以在 map 的中心添加一个标记，让用户将 map “移动”到右侧 position ......但拖动体验要好得多。

我已经尝试过这种使标记的“方法”工作的方法，但是标记没有正确加载（没有 animation，没有可拖动，即使选项没问题。我认为我必须缺少一些东西。

当我用 new google.maps.Marker(...); 这样初始化时

addMarker(data) {
      this.markers = [];
      const coords = data;
      this.center = coords;
      this.markers.push(
        new google.maps.Marker(
        {
        map: this.map,
        title: 'Acuario de Gijón',
        label: 'yala',
        options:{
          clickable: true,
          draggable: true,
          animation: google.maps.Animation.DROP,
        },
        position: {
          ...coords
        },
      }
      )
      );
    }

多谢你们！

Answer 1

我认为问题在于您推送了错误的Marker 实例。

这是我的解决方案：

let newMarker = new google.maps.Marker({
    position: {
      ...coords
    },
    options: {
      draggable: true,
      animation: google.maps.Animation.DROP,
    },
});
this.markers.push(newMarker);