Question

我正在尝试在我的Angular谷歌地图中实时移动标记，但它没有更新。它只获得第一次静态数据然后它无法正常工作我搜索谷歌但没有任何工作对我来说。这是我的应用程序。 component.ts，

export class AppComponent {
title = "app";
lat: number = 33.738045;
lng: number = 73.084488;
constructor() {
let eventSource = window["EventSource"];
var urlToChangeStream ="http://192.168.100.7:3000/api/places/change-stream?_format=event-stream";
var src = new eventSource(urlToChangeStream);
src.addEventListener("data", function(msg) {
  var data = JSON.parse(msg.data);
  this.lat =data.data.latitude;
  this.lng = data.data.longitude;
});
}

这是我的app.component.html

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

提前致谢。

Answer 1

我唯一能想到的就是这个

 src.addEventListener("data", function(msg) => { //adding arrow function
  var data = JSON.parse(msg.data);
  this.lat =data.data.latitude;
  this.lng = data.data.longitude;
});

我认为事件监听器中的this.lat与组件中的this.lat不同。箭头函数应该让函数继承父上下文。

Answer 2

您的问题

JSON.parse(msg.data); <--- String

但是

[latitude]="lat" [longitude]="lng" <--- Number

您的修复

this.lat = parseFloat(data.data.latitude)

你完成了。

标记不随着实时纬度和经度角谷歌地图一起移动

2 个答案:

您的问题

您的修复