使用vue-amap进行省市定位

优点：可以直接集成到vue中，而且不需要配置跨域相关信息

使用vue-amap进行省市定位需要用到api插件中的定位插件，链接地址：vue-amap定位插件

 

在vue项目中使用

使用步骤：

1.安装

npm install vue-amap --save 或者 yarn add vue-amap

2.在.babelrc文件中配置如下信息

{ "presets": [ ["es2015", { "modules": false }] ] }

3.下载 babel-preset-es2015

npm install babel-preset-es2015 --save 或者 yarn add babel-es2015

4.在main.js中引入vue-amap并引用

import VueAMap from 'vue-amap';
Vue.use(VueAMap);

// 初始化 省市定位关键是在plugin中加入AMap.Geolocation

VueAMap.initAMapApiLoader({

    key: '你在高德地图注册拿到的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'
});

5.在页面中使用

 

完！