<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: "",//设置你自己的key对应的密钥
    };
  },
  mounted() {
    this.initAMap();
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "", //设置你自己的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); // 获取经纬度
            // 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);
        });
    },
    //获取驾车规划
    driverMap(AMap, KL, kT) {
      // 默认从南京出发模拟 点击为到达的地点
      if(this.driving!=null){
        this.driving.clear()// 判断清除上一个路线规划
      }
      this.map.plugin(["AMap.Driving"], async () => {
        console.log("进来了吗");
        this.driving = new AMap.Driving({
          // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
          policy: AMap.DrivingPolicy.LEAST_TIME, // 其他策略 参考官网 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即是对应的路线规划方案
          console.log(status, result);
        });
      });
    },
    // 信息窗体 根据经纬度获取地址信息
    makInfo(AMap, KL, kT) {
      // 信息窗体的内容
      var geocoder;
      let res = "";
      let that = this;
      //加载地理编码插件
      this.map.plugin(["AMap.Geocoder"], function () {
        //加载地理编码插件
        geocoder = new AMap.Geocoder({
          radius: 1000, //以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
          extensions: "all", //返回地址描述以及附近兴趣点和道路信息，默认“base”
        });
        // //返回地理编码结果
        // 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);
        });
      });
    },
    // 点击只出现单个标点   
    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 导致无法清除上一个标点和路线规划