美文网首页Vue
Vue <调用高德获取地理位置问题>

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

作者: 誰在花里胡哨 | 来源:发表于2019-02-28 15:07 被阅读1216次

//安装插件
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']
});
//在需要应用的页面里写入
<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)  //可以获取到经纬度
}
}

相关文章

网友评论

    本文标题:Vue <调用高德获取地理位置问题>

    本文链接:https://www.haomeiwen.com/subject/bbnhuqtx.html