AGM MAP 绑定问题答案

【问题标题】：AGM MAP binding issueAGM MAP 绑定问题
【发布时间】：2019-10-24 05:40:39
【问题描述】：

我们的目标是在地图上画圆来定义地理围栏规则，并根据圆的坐标和半径更新表单字段。

我在 circlecomplete 句柄中添加了 radius_changed 处理，如下所示：

const _self = this;
const precision = 1000000;
// handle draging
google.maps.event.addListener(circle, 'radius_changed', function () {
  _self.updateLocationData({
    latitude: Math.round(circle.getCenter().lat() * precision) / precision,
    longitude: Math.round(circle.getCenter().lng() * precision) / precision,
    radius: Math.round(circle.getRadius())
  });
});

触发updateLocationData方法定义为：

updateLocationData(data: any) {
this.circleUpdateSource$.next(data);

}

我在 ngOnInit 中订阅的内容：

this.circleUpdateSource.subscribe((data: any) => {
  console.log(data);
  this.test = data.radius;
  this.rule = {
    radius: data.radius,
    lat: data.latitude,
    lng: data.longitude
  };
});

除了在订阅模板中绑定数据外，一切都很好。 Console.log 会在触发事件时立即输出，但 {{test}} 或 {{rule}} 仅在光标移出圆圈或单击圆圈外的地图后更新。任何的想法？

【问题讨论】：

您使用了 agm-map 标签，但您没有使用 AGM。我建议看一下：angular-maps.com

标签： angular google-maps-api-3

【解决方案1】：

我发现了其他人可能受益的诀窍！您需要手动调用一个tick来触发模板中的更新！

this.appRef.tick();

导入中：

ApplicationRef

在构造函数中：

private appRef: ApplicationRef

【讨论】：