第一步 引入 js 文件
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.3&key=********************"></script>
这里的 *********** 需要你自己去 高德地图 官网 去注册申请 一个webapi 然后你会得到一个key 放这就可以了
第二步 编写js方法
废话补多少 直接上代码 代码 直接 将方法绑定在了 vue 身上
Vue.prototype.$getLocationInfo= (callback) => {
//获取当前位置(方法名)
let map, geolocation;
//加载地图,调用浏览器定位服务
map = new AMap.Map('container', {
resizeEnable: true
});
map.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
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', function (obj) {
callback({status:1,position:obj.position,addressInfo:obj.formattedAddress})
}); //返回定位信息
AMap.event.addListener(geolocation, 'error', function (error) {
callback({status:0})
}); //返回定位出错信息
});
我写成了回调模式 所以 在任意页面 你调用即可
this.$getLocationInfo((result) => {
console.info(result)
})
里面就是地理位置信息了
这里注意一点 高德地图 申请秘钥地址 https://lbs.amap.com/
申请的时候 记得选 web端 jsAPI哦