高德地图

用高德地图做了定位:

准备工作就不多说了,就是注册登录账号获得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

上一篇:高德地图根据经纬度转换成地址JS代码demo


下一篇:前端页面引入高德地图