Angular Google Maps标记无法实时随经纬度更新求助

嘿，我一眼就看出问题出在哪了——回调函数里的this上下文绑定错误，导致你更新的根本不是组件里的lat和lng属性，自然标记不会跟着动。咱们来一步步修复：

问题根源 #

你在addEventListener里用了普通的function()回调，这个函数里的this指向的是EventSource实例本身，而不是你的AppComponent。所以你写的this.lat = data.data.latitude其实是给事件源对象加了个lat属性，完全没碰组件里的变量，Angular的变更检测自然感知不到变化。

解决方案 #

有两种简单的方式修复这个问题，推荐第一种：

1. 使用箭头函数（推荐） #

箭头函数会自动继承外层上下文的this，也就是你的组件实例：

import { Component } from '@angular/core';

export class AppComponent { 
  title = "app"; 
  lat: number = 33.738045; 
  lng: number = 73.084488; 

  constructor() { 
    const eventSource = window["EventSource"];
    const urlToChangeStream = "http://192.168.100.7:3000/api/places/change-stream?_format=event-stream";
    const src = new eventSource(urlToChangeStream);
    
    // 换成箭头函数，this就指向AppComponent了
    src.addEventListener("data", (msg) => { 
      const data = JSON.parse(msg.data);
      this.lat = data.data.latitude;
      this.lng = data.data.longitude;
      console.log('更新后的坐标：', this.lat, this.lng); // 可以加日志验证是否更新成功
    }); 
  }
}

2. 手动绑定this到组件实例 #

如果一定要用普通函数，可以用bind()把this绑定到组件：

src.addEventListener("data", function(msg) { 
  const data = JSON.parse(msg.data);
  this.lat = data.data.latitude;
  this.lng = data.data.longitude;
}.bind(this)); // 绑定组件的this

额外检查点 #

如果做完上述修改后标记还是不更新，可能需要手动触发Angular的变更检测（异步回调里有时变更检测不会自动触发）：

1. 先注入ChangeDetectorRef：

import { Component, ChangeDetectorRef } from '@angular/core';

export class AppComponent { 
  // ... 其他代码
  
  constructor(private cdr: ChangeDetectorRef) { 
    // ... 事件源代码
    src.addEventListener("data", (msg) => { 
      const data = JSON.parse(msg.data);
      this.lat = data.data.latitude;
      this.lng = data.data.longitude;
      this.cdr.detectChanges(); // 手动触发变更检测
    }); 
  }
}

你的app.component.html代码不需要修改，保持原样即可：

<agm-map [latitude]="lat" [longitude]="lng"> 
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker> 
</agm-map>

这样修改后，当EventSource接收到新数据时，组件的lat和lng会正确更新，Angular也会自动同步地图上的标记位置啦～

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