在uniapp中获取当前定位和选择当前位置都是做了兼容，在各个平台都可以使用，这篇文章讲解如何定位当前位置，搜索位置，点击进行定位在H5中实现uni.chooseLocation,如下图所示
左侧微信小程序的选择位置，右侧为高德地图在H5中的选择位置
这里讲解一下uni.chooseLocation
可以看到这个api的兼容平台是很完美的，但是在注意事项中表示了
不同端，使用地图选择时基于的底层地图引擎不一样，如 微信小程序 是腾讯地图，H5 是腾讯地图或谷歌地图，App和阿里小程序 是高德地图，百度小程序 是百度地图
因此项目开发中需要使用的是高德地图，但是配置项中却只能配置腾讯或者谷歌的key,只能自己动手封装
该插件已发布插件市场，有问题请评论或私聊哦
H5端使用高德地图实现uni.chooseLocation - DCloud 插件市场
1.引入地图
动态加载script标签引入地图api
mounted() {
this.showPlace = this.show;
var script = document.getElementById('mapTest')
let that = this;
script ? this.loop() : (function (){
var script = document.createElement("script");
script.type = "text/javascript";
script.setAttribute('id', 'mapTest')
script.src = `https://webapi.amap.com/maps?v=2.0&key=${that.keyMap}`;
document.body.appendChild(script);
that.loop();
})()
},2.初始化地图，定位当前位置进行查询
methods: {
loop() {
try{
this.initMapWeb();
}catch(e){
setTimeout(()=>this.loop(), 200)
}
},
initMapWeb() {
let that = this;
this.map = new AMap.Map("map", {
center: [ '106.55', '29.57'],
zoom: 16
});
this.map.on('click', (e) => {
if(this.marker) {
this.marker.setMap(null);
}
that.addMarker(e.lnglat.lng, e.lnglat.lat);
that.getPlaces('', `${e.lnglat.lng}, ${e.lnglat.lat}`);
that.getNowPlace(`${e.lnglat.lng}, ${e.lnglat.lat}`);
})
if(this.initLocation.length > 0) {
let tempArr = this.initLocation.split(',');
that.addMarker(tempArr[0], tempArr[1])
that.getPlaces('', `${tempArr[0]}, ${tempArr[1]}`);
that.getNowPlace(`${tempArr[0]}, ${tempArr[1]}`);
return
}
AMap.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
// 是否使用高精度定位，默认：true
enableHighAccuracy: true,
// 设置定位超时时间，默认：无穷大
timeout: 10000,
// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
buttonOffset: new AMap.Pixel(10, 20),
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
zoomToAccuracy: true,
// 定位按钮的排放位置, RB表示右下
buttonPosition: 'RB'
})
geolocation.getCurrentPosition(function(status,result){
if(result.info == "SUCCESS" && result.position && result.position){
that.addMarker(result.position.lng, result.position.lat)
that.getPlaces('', `${result.position.lng}, ${result.position.lat}`)
that.getNowPlace(`${result.position.lng}, ${result.position.lat}`);
}
});
})
},
getNowPlace(location) {
uni.request({
url: `https://restapi.amap.com/v3/geocode/regeo?key=${this.AMapKeyWeb}&location=${location}`,
method: 'GET',
success: (res) => {
let result = res.data;
if(result.status == '1') {
let tempObj = result.regeocode;
this.checked = {
adcode: tempObj.addressComponent.adcode,
city: tempObj.addressComponent.city,
district: tempObj.addressComponent.district,
location,
addressLocal: tempObj.formatted_address
}
}
},
fail: (err) => {
uni.showToast({
title: JSON.stringify(err),
icon: 'none'
})
}
})
},
addMarker(lng, lat) {
var icon = new AMap.Icon({
// 图标的取图地址
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
// 图标所用图片大小
imageSize: new AMap.Size(32, 42),
});
this.marker = new AMap.Marker({
icon,
position: [lng, lat],
});
this.marker.setMap(this.map);
this.map.setCenter([lng, lat])
},
getPlaces(keywords, location) {
uni.request({
url: `https://restapi.amap.com/v3/assistant/inputtips?key=${this.AMapKeyWeb}&keywords=${keywords}&location=${location}`,
method: 'GET',
success: (res) => {
// console.log(res)
let result = res.data;
if(result.status === '1') {
this.list = result.tips.filter(item => item.location && item.location.length > 0);
// console.log(this.list, result.tips)
}
},
fail: (err) => {
uni.showToast({
title: JSON.stringify(err),
icon: 'none'
})
}
})
}
}uniapp的更多功能请移步 - uniapp实现常用功能_哆来A梦没有口袋的博客-CSDN博客_uniapp功能