前端出現變數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);
      });
    });
....
}