是否可以使用 angular google 地图对纬度和经度进行双向绑定？

Question

我正在使用以下代码在我的 angular 应用程序上显示 google 地图：

<agm-map id="map" [(latitude)]="lat" [zoom]="zoom" [(longitude)]="lng" [zoomControl]="false"
    [streetViewControl]="false">
  </agm-map>
<span>{{lat}} : {{lng}}</span>

加载时，它起作用了，我得到了我在控制器中的初始坐标。

如果我在我的控制器中更新 lat 或 lng，它会工作，地图和跨度都会正确更新。

但是当我用鼠标移动地图时，纬度和经度没有更新。

我需要根据位置更改一些标记集合。

这是不受支持还是我做错了什么？

Answer 1

使用centerChange输出事件发射器获取纬度和经度。正如@AshotAleqsanyan 在评论中提到的，您可以使用 debounceTime 运算符来延迟值的发射。

component.html

<agm-map id="map" [(latitude)]="lat" [zoom]="zoom" [(longitude)]="lng" [zoomControl]="false" (centerChange)="centerChange($event)"
    [streetViewControl]="false">
  </agm-map>
 <span>{{lat}} : {{lng}}</span>

component.ts

进口

import { Component, OnInit } from "@angular/core";
import { Subject } from "rxjs";
import { debounceTime } from "rxjs/operators";

export class Component implements OnInit {
  subject: Subject<LatLngLiteral> = new Subject();

  ngOnInit() {
    this.subject.pipe(debounceTime(300)).subscribe(details => {
      this.lat = details.lat;
      this.lng = details.lng;
    });
  }

  centerChange(code) {
    this.subject.next(code);
  }
}

是否可以使用 angular google 地图对纬度和经度进行双向绑定？

Is it possible to have a 2-way binding to latitude and longitude with angular google maps?

angular-google-maps

angular