vue+高德地图api

最近的项目用到了高德地图，来记录一下吧~

1.首先在index.html中引入    

//放密钥
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: '你的密钥',
    }
  </script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=自己的key"></script>

2.给了以下几个数据属性

data() {
        return {
            mark: null,
            reLnglat: null,
            sum: 1,
            markerArr: []
        }
    },

3.完成地图初始化

mounted() {
        //DOM初始化完成进行地图初始化
        this.initMap();

    },
 methods: {
        initMap() {
            var that = this;
            that.map = new AMap.Map("container", {  //设置地图容器id
                resizeEnable: true, //是否监控地图容器尺寸变化
                zoom: 16,
                // dragEnable: false,
                zoomEnable: false,
            });
    }
}

需求开始啦

4.定位到所在位置，因为开发的是移动端，需要将gps定位转高德定位

      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 10000, //超过10秒后停止定位，默认：5s
          buttonPosition: "BT", //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
          showCircle: false,
          showMarker: false,
          panToLocation: true,
        });
        var p = [];
        that.map.addControl(geolocation);
        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            // console.log(result.position, "成功");
            // var myPosition = result.position;
            that.map.setCenter(result.position);
            p.push(result.position.lng);
            p.push(result.position.lat);
            // that.thPosition = myPosition;
//gps转高德
            AMap.convertFrom(p, "gps", function (status, result) {
              if (result.info === "ok") {
                var resLnglat = result.locations[0];
                that.reLnglat = resLnglat;
              }
            });
          } else {
            console.log("失败");
          }
        });
      });

5.点击一个按钮标记点，连接两点

//打卡   
 async cenParentMsg() {
      var that = this;
      that.sum++;
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 10000, //超过10秒后停止定位，默认：5s
          buttonPosition: "BT", //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
          showCircle: false,
          showMarker: false,
          panToLocation: true,
        });
        var p = [];
        that.map.addControl(geolocation);
        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            that.map.setCenter(result.position);
            p.push(result.position.lng);
            p.push(result.position.lat);

            AMap.convertFrom(p, "gps", function (status, result) {
              if (result.info === "ok") {
                var resLnglat = result.locations[0];
                that.reLnglat = resLnglat;
              }
            });
            var marker = new AMap.Marker({
              position: p,
            });
            marker.setLabel({
              direction: "center",
              offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
              content: "<div>" + that.sum + "</div>", //设置文本标注内容
            });
            that.map.add(marker);
            that.markerArr.push(marker);

            var line = new AMap.Polyline({
              strokeColor: "#3d5dff",
              // isOutline: true,
              outlineColor: "#3d5dff",
            });
            line.setMap(that.map);
            function ao() {
              var p1 = that.markerArr[that.sum - 2].getPosition();
              var p2 = that.markerArr[that.sum - 1].getPosition();
              var path = [p1, p2];
              line.setPath(path);
            }
            ao();
          } else {
            console.log("失败");
          }
        });
      });
    },