前端出现变量map未定义

  • 前端出现变量map未定义已关闭评论
  • 77 次浏览
  • A+
所属分类:Web前端
摘要

在JavaScript中,函数内部的this关键字取决于函数的调用方式。当你在回调函数中使用function(e) { … }时,该函数内部的this值可能不是你期望的值,通常情况下是指向全局对象(在浏览器环境中为window)或在严格模式下为undefined。
为了解决这个问题,你可以使用箭头函数(() => { … })而不是传统的函数表达式。箭头函数没有自己的this上下文,它从周围的作用域继承this。引用外部作用域中的this,其中this.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被定义。

修改方案为:

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);       });     }); .... }