前端vue地图自动定位当前位置

 

先到高的开放平台申请key

在index.html引入高德地图文件

<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="https://webapi.amap.com/maps？v=1.4.15&key='key值'&plugin=AMap.DistrictSearch"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>  

详细看下面代码

<template>
  <div>
    <van-popup
      v-model="showPoPuP3"
      position="top"
      :style="{ height: '50%' }"
      @opened="wancheng"
    >
      <div id="containers" class="containers"></div>
    </van-popup>
    <van-cell-group>
      <van-field
        v-model="lonLat"
        required
        clearable
        label="位置"
        left-icon="location-o"
        readonly
      >
        <template #button>
          <van-button size="small" type="primary" @click="showPopup3"
            >获取经纬度</van-button
          >
        </template>
      </van-field>
    </van-cell-group>
  </div>
</template>
 
<script>
export default {
  name: "11",
  data() {
    return {
      lonLat: "", //经纬度
      showPoPuP3: false, //是否展示地图
      lonLat_y: "", // 经纬度
      lonLat_x: "", // 经纬度
      lng: "",
      lat: "",
    };
  },
  created() {
    this.qwe();
  },
  methods: {
    //自动定位
    qwe() {
      let that = this;
      var map = new AMap.Map("container", {
        resizeEnable: true,
      });
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 10000, //超过10秒后停止定位，默认：5s
          buttonPosition: "RB", //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            that.onComplete(result);
          } else {
            that.onError(result);
          }
        });
      });
    }, //解析定位结果
    onComplete(data) {
      let than = this;
      console.log(data); // document.getElementById('status').innerHTML='定位成功'
      var str = [];
      str.push("定位结果:" + data.position);
      str.push("定位类别:" + data.location_type);
      if (data.accuracy) {
        str.push("精度:" + data.accuracy + " 米");
      } //如为IP精确定位结果则没有精度信息
      str.push("是否经过偏移:" + (data.isConverted ? "是" : "否"));
      // console.log(str);
      // alert(str);
      console.log("定位成功" + str); // document.getElementById('result').innerHTML =
      str.join("<br>");
      than.lng = data.position.lng;
      than.lat = data.position.lat;
      than.lonLat_y = data.position.lat;
      than.lonLat_x = data.position.lng;
    },
    //解析定位错误信息
    onError(data) {
      alert(data);
      // console.log(data);
      // console.log("定位失败");
      // console.log(data.message);
    },
    //地图
    wancheng() {
      this.getCenterMaps();
    },
    // 是否展示地图
    showPopup3() {
      this.showPoPuP3 = true;
      // this.qwe();
    },
    //弹出地图
    getCenterMaps() {
      let xx = "";
      let yy = "";
      console.log(this.lng, this.lat);
      console.log(this.lonLat_x, this.lonLat_y);
      // 弹出地图时 如果lonLat_x是空，就用自动获取定位的值
      if (this.lonLat_x == "") {
        xx = this.lng;
        yy = this.lat;
      } else {
        xx = this.lonLat_x;
        yy = this.lonLat_y;
      }
      var than = this;
      this.abmap = new AMap.Map("containers", {
        viewMode: "2D",
        zoom: 16.4,
        // center: this.onePointxy,
        center: [xx, yy],
        resizeEnable: true,
      });
      than.addMarker(xx, yy);
      console.log(xx, yy);
      than.lonLat = xx + "," + yy;
      this.abmap.on("click", function (e) {
        console.log(e);
        than.abmap.remove(than.pointLisone);
        than.addMarker(e.lnglat.getLng(), e.lnglat.getLat());
        than.lonLat = e.lnglat.getLng() + "," + e.lnglat.getLat();
        than.lonLat_x = e.lnglat.getLng();
        than.lonLat_y = e.lnglat.getLat();
        console.log(than.lonLat);
        console.log(than.lonLat_x, than.lonLat_y);
      });
    },
    //标记点
    addMarker(lng, lat) {
      console.log(lng, lat);
      this.pointLisone = new AMap.Marker({
        icon: "坐标图片的地址",
        position: [lng, lat], //在这里设置需要打点的坐标
        offset: new AMap.Pixel(-13, -30),
      });
      this.abmap.add(this.pointLisone);
    },
  },
};
</script>
 
<style scoped>
.containers {
  width: 100%;
  height: 100%;
}
</style>