vue 使用高德地圖 清除上一個標點和清除上一個路線規(guī)劃

<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ī)劃

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末扇单,一起剝皮案震驚了整個濱河市换可,隨后出現(xiàn)的幾起案子椎椰,更是在濱河造成了極大的恐慌,老刑警劉巖沾鳄,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件俭识,死亡現(xiàn)場離奇詭異,居然都是意外死亡洞渔,警方通過查閱死者的電腦和手機套媚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來磁椒,“玉大人堤瘤,你說我怎么就攤上這事〗郏” “怎么了本辐?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我慎皱,道長老虫,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任茫多,我火速辦了婚禮祈匙,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘天揖。我一直安慰自己夺欲,他們只是感情好,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布今膊。 她就那樣靜靜地躺著些阅,像睡著了一般。 火紅的嫁衣襯著肌膚如雪斑唬。 梳的紋絲不亂的頭發(fā)上市埋,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機與錄音恕刘,去河邊找鬼腰素。 笑死,一個胖子當著我的面吹牛雪营,可吹牛的內(nèi)容都是我干的弓千。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼献起,長吁一口氣:“原來是場噩夢啊……” “哼洋访!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起谴餐,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤姻政,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后岂嗓,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體汁展,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年厌殉,在試婚紗的時候發(fā)現(xiàn)自己被綠了食绿。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡公罕,死狀恐怖器紧,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情楼眷,我是刑警寧澤铲汪,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布熊尉,位于F島的核電站,受9級特大地震影響掌腰,放射性物質(zhì)發(fā)生泄漏狰住。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一齿梁、第九天 我趴在偏房一處隱蔽的房頂上張望催植。 院中可真熱鬧,春花似錦士飒、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至缓苛,卻和暖如春芳撒,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背未桥。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工笔刹, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人冬耿。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓舌菜,卻偏偏與公主長得像,于是被迫代替她去往敵國和親亦镶。 傳聞我的和親對象是個殘疾皇子日月,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容