<template>
  <div class="home_div">
    <div class="map_title">
      <h3>JSAPI Vue2地圖組件示例</h3>
    </div>
    <div id="container"></div>
    <div id="tishi"></div>
  </div>
</template>

import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "Mapview",
  data() {
    return {
      map: null,
      // marker:null
      marker1: null,
      marker2: null,
      geocoder: null,
      driving:null
    };
  },
  created() {
        window._AMapSecurityConfig = {
      securityJsCode: "",//設(shè)置你自己的key對應(yīng)的密鑰
    };
  },
  mounted() {
    this.initAMap();
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "", //設(shè)置你自己的key
        version: "2.0",
        plugins: [
          "AMap.ToolBar",
          "AMap.Driving",
          "AMap.Geocoder",
          "AMap.Driving",
        ],
        AMapUI: {
          version: "1.1",
          plugins: [],
        },
        Loca: {
          version: "2.0",
        },
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            viewMode: "3D",
            zoom: 5,
            zooms: [2, 22],
            center: [105.602725, 37.076636], 
          });
          this.map.on("click", (e) => {
            console.log(e.lnglat.KL, e.lnglat.kT); // 獲取經(jīng)緯度
            // this.makBro(AMap,e.lnglat.KL,e.lnglat.kT)
            // this.makInfo(AMap, e.lnglat.KL, e.lnglat.kT);
            this.driverMap(AMap, e.lnglat.KL, e.lnglat.kT);
          });
          this.map.on("dblclick", (e) => {
            console.log("雙擊了", e);
            this.maRemoveAll();
          });
          // let marker = new AMap.Marker({
          //     icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
          //     position: [116.405467, 39.907761]
          // });
          // let circle = new AMap.Circle({
          //     center: new AMap.LngLat("116.403322", "39.920255"), // 圓心位置
          //     radius: 1000,  //半徑
          //     strokeColor: "#F33",  //線顏色
          //     strokeOpacity: 1,  //線透明度
          //     strokeWeight: 3,  //線粗細度
          //     fillColor: "#ee2200",  //填充顏色
          //     fillOpacity: 0.35 //填充透明度
          // });
          // this.map.add(circle)
          // this.map.setFitView()
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //獲取駕車規(guī)劃
    driverMap(AMap, KL, kT) {
      // 默認從南京出發(fā)模擬 點擊為到達的地點
      if(this.driving!=null){
        this.driving.clear()// 判斷清除上一個路線規(guī)劃
      }
      this.map.plugin(["AMap.Driving"], async () => {
        console.log("進來了嗎");
        this.driving = new AMap.Driving({
          // 駕車路線規(guī)劃策略尺铣，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
          policy: AMap.DrivingPolicy.LEAST_TIME, // 其他策略 參考官網(wǎng) https://lbs.amap.com/api/jsapi-v2/documentation#drivingpolicy
          map: this.map,
          panel: "tishi",
        });
        var startLngLat = [118.78631875000013, 32.04950317647876]; // 開始地點
        var endLngLat = [KL, kT]; // 目的地點
        this.driving.search(startLngLat, endLngLat, function (status, result) {
          // 未出錯時，result即是對應(yīng)的路線規(guī)劃方案
          console.log(status, result);
        });
      });
    },
    // 信息窗體 根據(jù)經(jīng)緯度獲取地址信息
    makInfo(AMap, KL, kT) {
      // 信息窗體的內(nèi)容
      var geocoder;
      let res = "";
      let that = this;
      //加載地理編碼插件
      this.map.plugin(["AMap.Geocoder"], function () {
        //加載地理編碼插件
        geocoder = new AMap.Geocoder({
          radius: 1000, //以已知坐標為中心點隔躲，radius為半徑彰导，返回范圍內(nèi)興趣點和道路信息
          extensions: "all", //返回地址描述以及附近興趣點和道路信息距辆，默認“base”
        });
        // //返回地理編碼結(jié)果
        // geocoder.on("complete", (geocoderDate)=>{
        //   console.log("data",geocoderDate);
        // });
        //逆地理編碼
        geocoder.getAddress([KL, kT], (status, result) => {
          console.log("e:", status, result);
          res = result.regeocode.formattedAddress;
          console.log(res);
          var content = [
            // "<div><img src="\"" http:="" webapi.amap.com="" images="" autonavi.png="" \"=""> ",
            // "<div style="\"padding:0px" 0px="" 4px;\"=""><b>高德軟件有限公司</b>",
            "電話 : 010-84107000   郵編 : 100102",
            `地址 :</div>${res}</div>`,
          ];
          var infoWindow = new AMap.InfoWindow({
            content: content.join("<br>"), //傳入 dom 對象介陶，或者 html 字符串
          });
          infoWindow.open(that.map, [KL, kT]);
          infoWindow.open(that.map);
        });
      });
    },
    // 點擊只出現(xiàn)單個標點   
    makBro(AMap, KL, kT) {   // 
      if (this.marker1 == null) {
        if (this.marker2 != null) {
          this.map.remove([this.marker2]);
          this.marker2 = null;
        }
        this.marker1 = new AMap.Marker({
          icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
          offset: new AMap.Pixel(-10, -30),
          position: [KL, kT],
        });
        this.map.add(this.marker1);
        this.map.setFitView();
      } else {
        this.map.remove([this.marker1]);
        this.marker1 = null;
        this.marker2 = new AMap.Marker({
          icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
          offset: new AMap.Pixel(-10, -30),
          position: [KL, kT],
        });
        this.map.add(this.marker2);
        this.map.setFitView();
      }
    },
    maRemoveAll() {
      // AMap.remove()
      // console.log(this.marker);
      // this.map.remove([this.marker]);
    },
  },
};

.home_div {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: relative;
}
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
}
.map_title {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 50px;
  background-color: rgba(27, 25, 27, 0.884);
}
h3 {
  position: absolute;
  left: 10px;
  z-index: 2;
  color: white;
}
#tishi {
  width: 30%;
  height: 50%;
  overflow: scroll;
  position: relative;
  top: 10%;
}

我遇到的原因是沒有使用在data里面第定義和使用 而是使用var 或者 let 導致無法清除上一個標點和路線規(guī)劃