无法从功能传单中访问 this.map

Posted 2023-02-23

【中文标题】无法从功能传单中访问 this.map

【英文标题】：Cant reach this.map from a function leaflet

【发布时间】：2017-10-31 20:52:51

【问题描述】：

我要做的是每秒在地图上定位用户位置。我知道我可以用setInterval(function(),1000);调用一个函数

我正在用

初始化地图

ionViewDidEnter() 
    this.map = leaflet.map("map").fitWorld();
    this.loadmap();

问题是我无法通过定位功能到达地图。

function locate()

var marker;

this.map.locate(
  setView: true,
  maxZoom: 120
).on("locationfound", e => 
    if (!marker) 
        marker = new L.marker(e.latlng).addTo(this.map);
     else 
        marker.setLatLng(e.latlng);
    
).on("locationerror", error => 
    if (marker) 
        map.removeLayer(marker);
        marker = undefined;
    
);

如果我删除函数 locate(); this.map.locate 有效，但是因为我想每秒定位用户以跟踪他们的位置，所以我需要每秒调用 .locate，所以我尝试将其放入函数中，每秒使用 setinterval 调用该函数，但它不起作用。有什么办法在不将 .locate 放入函数并调用它的情况下定位用户？

【问题讨论】：

嗯，听起来像XY problem...

【参考方案1】：

虽然您的问题并不完全清楚，但如果我理解正确，您正在尝试将您的 locate 函数作为 setInterval 的第一个参数调用，但随后您收到一条错误消息，指出 this.map 未定义或其他内容像这样？

在这种情况下，您只需要意识到this 指的是函数调用者的上下文。当您使用setInterval（setTimeout 相同）时，上下文不再是您的类实例对象（具有this.map 的对象），而是全局上下文。问题在这里解释：https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval#The_this_problem

有几个简单的解决方案，见Referencing "this" inside setInterval/setTimeout within object prototype methods

话虽如此，既然您想定期跟踪用户的位置，为什么不只依靠map.locate 的watch 选项呢？如果您正在尝试解决某些问题（可能是Leaflet .locate watch option breaks .locate after changing tab Ionic 3？），您很有可能应该解决该问题，而不是尝试解决症状。

【讨论】：

观看选项不起作用。当用户移动标记时，它会将标记放在用户的首位，而不会移动它保持初始位置。

您应该调查watch 选项不适合您。它在 Chrome 上对我来说很好用。