uniapp 安装使用高德地图api 获取当前定位
【代码】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
更多推荐
已为社区贡献2条内容
所有评论(0)