用高德地图做了定位:
准备工作就不多说了,就是注册登录账号获得key值,然后在main.js里引入
// 高德地图
import AMap from ‘vue-amap’;
Vue.use(AMap);
// 初始化vue-amap
AMap.initAMapApiLoader({
// 高德的key
key: ‘申请的key’,
// 插件集合 (插件按需引入)
plugin: [‘AMap.Autocomplete’, ‘AMap.PlaceSearch’, ‘AMap.Scale’, ‘AMap.OverView’, ‘AMap.ToolBar’, ‘AMap.MapType’, ‘AMap.PolyEditor’, ‘AMap.CircleEditor’]
});
然后就是使用,我需要获得的只有定位,所以对ui不做太多修整。
var that = this;
var mapObj = new AMap.Map('mapDemo');
mapObj.plugin('AMap.Geolocation', function () {
var 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.getCityInfo(function(status,result){
that.adress = result.country + result.province + result.city;
})
});
adress就是最终得到的地址,格式为*广东省深圳市。
高德开放平台:https://lbs.amap.com/
定位文档:https://lbs.amap.com/api/javascript-api/guide/services/geolocation