公众号项目有一个需求，获取当前用户的位置，传给服务端，服务端返回具体各门店的距离。因为移动端都是用高德地图API地位，为了减少相对应的误差，公众号也选用高德地图。
方法一. 直接调用高德原生 SDK
1.注册高德地图和获取高德地图的key
2.项目中index.html文件中引入高德地图 (key代表上面获得的)
<!--高德key--> <script src="//webapi.amap.com/maps?v=1.3&key=03f14607c0f3122faa4*****930e27"></script>
3.在项目里创建一个js文件，文件目录如下：
js文件里定位代码为：
/**
* 高德地图定位
* @type {{}}
*/
const location = {
initMap(id){
let mapObj = new AMap.Map(id, {})
let geolocation;
mapObj.plugin(['AMap.Geolocation'], function () {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位，默认:true
timeout: 10000, // 超过10秒后停止定位，默认：无穷大
maximumAge: 0, // 定位结果缓存0毫秒，默认：0
convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, // 显示定位按钮，默认：true
buttonPosition: 'LB', // 定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy: true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
})
mapObj.addControl(geolocation)
geolocation.getCurrentPosition()
})
return geolocation;
}
}
export default location4.在需要调用定位的页面引入positionLocation.js文件
import location from '../utils/positionLocation'
5. 调用js中的方法，获取当前地理位置
<script>
import location from '../utils/positionLocation'
export default {
name: 'home',
data () {
return {
location: '',
lat:0,
lng:0
}
},
methods: {
/** 获取高德地图定位 */
getLocation () {
let _that = this
let geolocation = location.initMap('map-container') // 定位
AMap.event.addListener(geolocation, 'complete', result => {
console.log(result)
_that.lat = result.position.lat
_that.lng = result.position.lng
_that.location = result.formattedAddress
})
}
},
mounted() {
this.getLocation(); // 调用获取地理位置
}
}打印结果为：
方法二.使用vue-amap
vue-amap是基于Vue2.x与高德的地图组件，数据状态与地图状态单向绑定，开发者无需关心地图的具体操作。
1.npm安装vue-amap
npm install vue-amap --save
2.在.babelrc文件中配置
{
"presets": [
["es2015", {"modules": false}]
]
}3. 在main.js中引入vue-amap
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
AMap.initAMapApiLoader({
// 高德key key: '03f14607c0f3122faa4*****930e27',
// 插件集合 （插件按需引入）
plugin: ['AMap.Geolocation']
});4. 页面调用方法
<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">
当前位置为：{{adress}}
</span>
<span v-else>正在定位</span>
</div>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data() {
let that = this;
return {
center: [121.59996, 31.197646],
adress:'',
loaded: false,
plugin: [{
pName: 'Geolocation',
events: {
init(o) {
// o 是高德地图定位插件实例
o.getCurrentPosition((status, result) => {
if (result && result.position) {
// 如果key是企业的，还可以直接result.addressComponent获取省市，周边等信息
console.log(result);
that.adress = result.formattedAddress;
self.center = [result.position.lng, result.position.lat];
self.loaded = true;
self.$nextTick();
}
});
}
}
}]
};
}
};
</script>调用结果：
总结问题：
1.npm install vue-amap --save 报如下警告
解决办法：
npm install -g npm
npm install stylus
2.定位时警告
原因 为: 在 IOS 10 中，苹果对 webkit 定位权限进行了修改，所有定位请求的页面必须是 https 协议的。如果是非 https 网页，在 http 协议下通过 html5 原生定位接口会返回错误，也就是无法正常定位到用户的位置，而已经支持 https 的网站则不会受影响。
3.注意vue-amap 的导入名不是 AMap， 避免和高德全局的 AMap 冲突。
4.若 eslint 报错 AMap is undefined 之类的错误。请将 AMap 配置到 .eslintrc 的 globals 中。
解决办法：
在.eslintrc.js 中引入 globals
globals: {
'AMap': false,
},5.提示 get geolocation timeout.get iplocation failed.
官方给出原因：
本篇独发金蝶云社区
推荐阅读