美文网首页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