uniapp 安装使用高德地图api 获取当前定位
1.安装
npm i @amap/amap-jsapi-loader --save
2.引入
import AMapLoader from @amap/amap-jsapi-loader;
3.创建容器
<view id="container"></view> <style> #container { padding: 0px; margin: 10px; width: 100%; height: 280px; } </style>
4.初始化地图
initMap() { AMapLoader.load({ key: "申请好的Web端开发者Key", // 申请好的Web端开发者Key,首次调用 load 时必填 version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 plugins: [AMap.Geocoder, AMap.Geolocation], // 需要使用的的插件列表,如比例尺AMap.Scale等 }).then((AMap) => { var map = new AMap.Map(container, { zoom: 15, resizeEnable: true }); map.plugin(AMap.Geolocation, () => { var geolocation = new AMap.Geolocation({ enableHighAccuracy: true, //是否使用高精度定位,默认:true timeout: 100, //超过10秒后停止定位,默认:无穷大 maximumAge: 0, //定位结果缓存0毫秒,默认:0 convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true showButton: true, //显示定位按钮,默认:true buttonPosition: RB, //定位按钮停靠位置,默认:LB,左下角 buttonOffset: new AMap.Pixel(10, 20), showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false }); map.addControl(geolocation); //获取定位信息 geolocation.getCurrentPosition((status, result) => { if (status == complete) { //成功执行的回调函数 this.onComplete(result) } else { //失败执行的回调函数 this.onError(result) } }); }); }).catch(e => { console.log(e); }) },
5.获取当前定位
onComplete(data) { console.log(定位成功) //发送请求 uni.request({ url: https://restapi.amap.com/v3/geocode/regeo, //逆地理编码接口地址。 data: { key: 申请好的Web服务开发者Key, //location:经纬度 lng :经度 lat:纬度 location: data.position.lng + , + data.position.lat, radius: 1000, extensions: all, batch: false, roadlevel: 0 }, header: { //自定义请求头信息 }, success: (res) => { //详细地址信息 console.log(res.data.regeocode.formatted_address); } }); }, //解析定位错误信息 onError(data) { console.log(定位失败) console.log(失败原因排查信息: + data.message) console.log(浏览器返回信息: + data.originMessage) }
注意!!! 初始化地图使用的是 web端开发者key 发送请求使用的是Web服务开发者key