前端出现变量map未定义

这篇具有很好参考价值的文章主要介绍了前端出现变量map未定义。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

原来错误代码

mounted() {
....
    this.map.addEventListener("click", function(e){//地图单击事件
      var geocoder = new BMap.Geocoder();
      var point = new BMap.Point(e.latlng.lng,e.latlng.lat);
      console.log("经度:"+e.latlng.lng +"纬度"+e.latlng.lat);
      geocoder.getLocation(point,function(geocoderResult,LocationOptions){
        // 清除点
        this.map.clearOverlays();
        this.map.addControl(new BMap.NavigationControl());
        var marker = new BMap.Marker(point);        // 创建标注
        this.map.addOverlay(marker);
      });
    });
....
}

在JavaScript中，函数内部的this关键字取决于函数的调用方式。当你在回调函数中使用function(e) { ... }时，该函数内部的this值可能不是你期望的值，通常情况下是指向全局对象（在浏览器环境中为window）或在严格模式下为undefined。
为了解决这个问题，你可以使用箭头函数（() => { ... }）而不是传统的函数表达式。箭头函数没有自己的this上下文，它从周围的作用域继承this。引用外部作用域中的this，其中this.map被定义。文章来源地址https://www.toymoban.com/news/detail-747406.html

修改方案为:

mounted() {
....
    this.map.addEventListener("click", (e)=>{//地图单击事件
      var geocoder = new BMap.Geocoder();
      var point = new BMap.Point(e.latlng.lng,e.latlng.lat);
      console.log("经度:"+e.latlng.lng +"纬度"+e.latlng.lat);
      geocoder.getLocation(point,(geocoderResult,LocationOptions)=>{
        // 清除点
        this.map.clearOverlays();
        this.map.addControl(new BMap.NavigationControl());
        var marker = new BMap.Marker(point);        // 创建标注
        this.map.addOverlay(marker);
      });
    });
....
}

到了这里，关于前端出现变量map未定义的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！