Vue <调用高德获取地理位置问题>

安装插件

首先npm install vue-amap --save

main.js代码：

import AMap from 'vue-amap';
Vue.use(AMap)
AMap.initAMapApiLoader({
  key: '问后端要',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView',
    'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor',
    'AMap.CircleEditor', 'AMap.Geolocation']
});

vue页面代码：

<template>
  <div>
    <el-amap vid="amap" :plugin="plugin" class="amap-demo"></el-amap>
  </div>
</template>

<script>
export default {
  data() {
    let self = this;
    return {
      positions: {
        lng: "",
        lat: "",
        address: "",
        loaded: false
      },
      center: [121.59996, 31.197646],
      plugin: [
        {
          pName: "Geolocation",
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                 console.log(result.position.lng,result.position.lat);  //  能获取定位的所有信息
                if (result && result.position) {
                  // self.str = result.formattedAddress;
                  // self.positions.address = self.str.substring(
                  //   self.str.indexOf("市") + 1
                  // );
                  self.positions.lng = result.position.lng;
                  self.positions.lat = result.position.lat;
                  self.positions.loaded = true;
                  self.$nextTick();
                  // 把获取的数据提交到 store 的数据中，以便其他单文件组件使用
                  // self.$store.commit("POSITION", self.positions);
                  // console.log(self.positions);
                  sessionStorage.setItem(
                    "id",
                    JSON.stringify(
                      result.position.lng + "," + result.position.lat
                    )
                  );
                }
              });
            }
          }
        }
      ]
    };
  },
 mounted() {
    console.log(window.sessionStorage.id)  //可以获取到经纬度
}
}

重新获取定位方法：

   //重新获取地理位置
    getLocation() {
      let self = this;
      return new Promise((resolve, reject) => {
          // sessionStorage中没有缓存，则开始定位
          AMap.service(["AMap.Geolocation"], () => {
            const geolocation = new AMap.Geolocation({
              enableHighAccuracy: false, //是否使用高精度定位，默认:true
              timeout: 5000 //超过5秒后停止定位，默认：无穷大
            });
            //  获取位置信息
            geolocation.getCurrentPosition((status, result) => {
              // console.log(result.position.lng,result.position.lat);  //  能获取定位的所有信息
              if (result && result.position) {
                self.positions.lng = result.position.lng;
                self.positions.lat = result.position.lat;
                self.positions.loaded = true;
                self.$nextTick();
                // 把获取的数据提交到 store 的数据中，以便其他单文件组件使用
                sessionStorage.setItem(
                  "id",
                  result.position.lng + "," + result.position.lat
                );
              }
            });
            // 获取位置信息完成触发事件
          });
      });
    }