使用vue-amap进行省市定位 - 好文

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

使用vue-amap进行省市定位需要用到api插件中的定位插件，链接地址：vue-amap定位插件
<https://elemefe.github.io/vue-amap/#/zh-cn/plugins/geolocation>

在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.在页面中使用
<template> <div class="amap-page-container"> <el-amap vid="amap"
:plugin="plugin" class="amap-demo" :center="center"> </el-amap> <div
class="toolbar"> <span v-if="loaded"> location: lng = {{ lng }} lat = {{ lat }}
</span> <span v-else>正在定位</span> </div> </div> </template> <style> .amap-demo {
height: 300px; } </style> <script> module.exports = { data() { let self = this;
return { center: [121.59996, 31.197646], lng: 0, lat: 0, loaded: false, 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.$nextTick(); } }); } } }] }; } }; </script>

完！

热门工具换一换