vue（h5）中使用高德获取当前定位

1、给地图模块并隐藏（不占据空间）：

<div class="hidden_map">

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

</div>

2、HTML：

<div class="personInfo">

     <span class="addTip">当前位置：</span>

     <span v-if="loaded" class="address">{{address}}</span>

     <span v-else>正在定位</span>

</div>

3、js：

import Vue from 'vue';  

import AMap from 'vue-amap';

Vue.use(AMap);   //引入模块

AMap.initAMapApiLoader({

  key: 'f2af30e958d41090138caf8058f73475',

  plugin: ['AMap.Geolocation']

})

data(){

        let self = this;

        return{

            center: [121.59996, 31.197646],

            lng: 0,

            lat: 0,

            loaded: false,

            address:'',

            plugin: [{

                pName: 'Geolocation',

                events: {

                init(o) {

                    // o 是高德地图定位插件实例

                    o.getCurrentPosition((status, result) => {

                        //console.log(result)

                    if (result && result.position) {

                        self.lng = result.position.lng;

                        self.lat = result.position.lat;

                        self.address = result.formattedAddress;//获得地址

                        self.center = [self.lng, self.lat];

                        self.loaded = true;

                        self.$nextTick();

                    }

                    });

                }

                }

            }],

        }

    }