vue(h5)中使用高德获取当前定位

1、给地图模块并隐藏(不占据空间):

    

2、HTML:

     当前位置:

     {{address}}

     正在定位

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();

                    }

                    });

                }

                }

            }],

        }

    }

你可能感兴趣的:(vue(h5)中使用高德获取当前定位)