vue-高德地图实现定位

在仿马蜂窝的小项目中有个模块需要定位用户的 当前位置，所以我打算使用高德地图的vue-amap插件实现功能。

首页去高德的开发者平台申请key。

我申请的是web端的。

然后npm install vue-amap下载amap的包

import VueAMap from 'vue-amap';

Vue.use(VueAMap);

在main.js中引入

初始化amap的配置

VueAMap.initAMapApiLoader({

  key: '',

  plugin: [

'AMap.Autocomplete',

        'AMap.PlaceSearch',

        'AMap.Scale',

        'AMap.OverView',

        'AMap.ToolBar',

        'AMap.MapType',

        'AMap.PolyEditor',

        'AMap.CircleEditor',

        'AMap.Geolocation'

  ],

  // 默认高德 sdk 版本为 1.4.4

  v: '1.4.4'

});

在官网默认的案例中是没有最后一个插件的，而要实现定位就一定要配置AMap.Geolocation这个插件。

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

center表示地图的中心点，

关键是plugin

center: [121.59996, 31.197646]

plugin: [{

            pName: 'Geolocation',

            events: {

              init(o) {

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

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

                  if (result && result.position) {

                    // 如果key是企业的，还可以直接result.addressComponent获取省市，周边等信息

                    /*self.lng = result.position.lng;

                    self.lat = result.position.lat;

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

                    self.loaded = true;

                    self.result=result;

                    if(result.addressComponent.city){

                    self.citys=result.addressComponent.city;

                    }else{

                    self.citys=result.addressComponent.province;

                    }

                    self.district=result.addressComponent.district;

                    self.$nextTick();

                  }

                });

              }

            }

          }]

省市区的信息是可以通过回调函数中的result.addressComponent来获取到的，但是这里要注意一点，如果是像北京这样的直辖市它的city是""空的，信息在province中。所以如果我们只想显示市和区的信息的话就要判断一下，当city不为空时，取city的信息，而如果city为空就取province的信息。

<span v-if="loaded">

          {{citys+district}}

        </span>

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

布局通过变量loaded控制显隐，如果定位的回调函数中已经请求回来具体信息则loaded为true。显示具体信息就可以了。