uniapp實現高德地圖定位，起點到終點連線

首先npm 引入 

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

　　

在生命周期里加載實例

data(){
　　return {
　　　　amap:{}, // 存放高德地圖實例對象
　　　　mapObj: {},  // 存放當前繪畫出的地圖對象
　　}
}

mounted() {
    // 初始化地圖
    AMapLoader.load({
      key: "", // 申請好的Web端開發者Key，首次調用 load 時必填
      version: "1.4.15", // 指定要加載的 JSAPI 的版本，缺省時默認為 1.4.15
      AMapUI: {
        // 是否加載 AMapUI，缺省不加載
        version: "1.1", // AMapUI 缺省 1.1
        plugins: ["overlay/SimpleMarker"], // 需要加載的 AMapUI ui插件
      },
　　　 // 引入api
      plugins: [  
        "AMap.Driving",  // 駕車出行
        "AMap.Geolocation",  // 定位
        "AMap.Autocomplete",  // 輸入提示插件
        "AMap.PlaceSearch",   // POI搜索插件
      ], //插件列表
    }).then((AMap) => {
      this.amap = AMap;
      this.initMap();
    });
},

methods: {
　　
initMap() {
  
  let that = this;
  // 定位icon
  let locationIcon = {
    showButton: true, //是否顯示定位按鈕
    buttonPosition: "RB", //定位按鈕的位置
    /* LT LB RT RB */
    buttonOffset: new AMap.Pixel(10, 50), //定位按鈕距離對應角落的距離
    showMarker: true, //是否顯示定位點
    markerOptions: {
      //自定義定位點樣式，同Marker的Options
      offset: new AMap.Pixel(-18, -36),
      content:
        '<img src="static/image/home/big-location.png" style="width:36px;height:36px"/>',
    },
    showCircle: true, //是否顯示定位精度圈
    circleOptions: {
      //定位精度圈的樣式
      strokeColor: "#0093FF",
      noSelect: true,
      strokeOpacity: 0.5,
      strokeWeight: 1,
      fillColor: "#02B0FF",
      fillOpacity: 0.25,
    },
  };
  that.mapObj = new this.amap.Map("myMap", {
    // container為容器的id
    resizeEnable: true,
    zoom: 12, //初始化地圖層級
  });

  // 實例化一個定位
  let geolocation = new AMap.Geolocation(locationIcon);
  this.mapObj.addControl(geolocation);
  geolocation.getCurrentPosition();

  // 成功后回調
  AMap.event.addListener(geolocation, "complete", function (data) {
    if (data.info === "SUCCESS") {
      console.log(data)  // 這里是定位成功后的輸出數據
    }
  });
  // 失敗回調
  AMap.event.addListener(geolocation, "error", function (data) {
    alert("獲取當前定位失敗");
  });

  
  let drivingOption = {
    map: this.mapObj,
    policy: AMap.DrivingPolicy.LEAST_TIME,
  };

  this.drivingObj = new AMap.Driving(drivingOption); //構造駕車導航類
},
}

　　

　　

開啟定位生成如下圖（注意如果到正式服，高德的定位需要配置https才能開啟）

添加搜索功能

searchHandel(cityVal) {
      let that = this;

      let autoOptions = {
        citylimit: true,
        city: "440304", // 配置文檔 https://developer.amap.com/api/javascript-api/reference/lnglat-to-address#m_AMap.Geocoder
      };
      let auto = new AMap.Autocomplete(autoOptions);

      if (cityVal) {
        auto.search(cityVal, function (status, result) {
          if (status === "complete" && result.info === "OK") {
                console.log('這里是搜索成功的數據,這個數據可以放到搜索列表里', result)
          }
        });
      }
},

　　

添加點擊搜索列表事件

listSelect(item) {
      let that = this;

      // 新建icon
      function setIcon(l) {
        return new AMap.Icon({
          size: new AMap.Size(25, 34),
          image: "static/image/home/dir-marker.png",   // 這里是一些雪碧圖icon
          imageSize: new AMap.Size(135, 40),
          imageOffset: new AMap.Pixel(l, -3),   // 雪碧圖偏移值
        });
      }

      // 將 icon 傳入 marker
      let marker;
      function setMarker(data) {
        // current 0 為起始位置   1位終點
        if (that.current == 0) {
          //添加marker
          marker = new AMap.Marker({
            map: that.mapObj,
            icon: setIcon("-9"),
            position: data.location,
          });
          that.startValue = item.name;
        } else {
          //添加marker
          marker = new AMap.Marker({
            map: that.mapObj,
            icon: setIcon("-95"),
            position: data.location,
          });

          that.endValue = item.name;
        }
      }

     
      that.position = item.location;
      setMarker(item);
      // 重新刷新地圖定位
      this.mapObj.setZoomAndCenter(12, item.location);
    
    },     

　　

完成效果如圖