小程序和h5实现地图选择位置,技术栈uniapp+vue3+setup
·
1.配置
先配置:
manifest.json 必须加这一段(小程序)
"mp-weixin": {
"permission": {
"scope.userLocation": {
"desc": "用于获取当前位置,选择服务地址"
}
},
"requiredPrivateInfos": ["chooseAddress","getLocation", "chooseLocation"]
}

manifest.json 必须加这一段(h5),需要配置腾讯地图key。我项目主要使用的是腾讯地图
没有key要去腾讯位置服务中去申请链接:(腾讯位置服务 - 立足生态,连接未来)
"h5": {
"permission": {
"geolocation": {
"description": "获取你的位置信息用于展示当前城市"
}
},
"sdkConfigs": {
"maps": {
"qqmap": {
"key": "AVSBZ-6BILR-K2EWT-WCIAT-DBFFF-XXXXB"
}
}
}
}

key 必须要申请,没有这个key就不能使用定位,非常重要!!!
再补充一下这个,都是关于定位的,你看下你有没有
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_BACKGROUND_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_MOCK_LOCATION\"/>",

2.代码实现
小程序代码
function getLocation() {
uni.showLoading({ title: '定位中...' });
// 1. 先申请权限(关键)
uni.authorize({
scope: 'scope.userLocation',
success: () => {
// 2. 高精度定位,坐标系必须是 gcj02
uni.getLocation({
type: 'gcj02', // 国内地图必须用这个!
isHighAccuracy: true, // 开启GPS高精度{insert\_element\_0\_}
timeout: 10000,
success: (locRes) => {
console.log('真实定位(gcj02):', locRes);
const { latitude, longitude } = locRes;
// 3. 明确把经纬度传给 chooseLocation
uni.chooseLocation({
latitude,
longitude,
success: (res) => {
uni.hideLoading();
console.log('选点结果:', res);
},
fail: (err) => {
uni.hideLoading();
console.error('地图选点失败:', err);
uni.showToast({ title: '地图打开失败或取消', icon: 'none' });
}
});
},
fail: (err) => {
uni.hideLoading();
console.error('定位失败:', err);
let msg = '定位失败,请开启定位权限';
if (err.errMsg && err.errMsg.includes('timeout')) msg = '定位超时,请在开阔地重试';
uni.showToast({ title: msg, icon: 'none' });
}
});
},
fail: () => {
uni.hideLoading();
uni.showModal({
title: '权限不足',
content: '需要定位权限才能选择地址,请在设置中开启',
confirmText: '去设置',
success: (res) => {
if (res.confirm) uni.openSetting();
}
});
}
});
}
h5代码
function getLocation() {
// 1. H5 用浏览器原生定位(最准)
navigator.geolocation.getCurrentPosition(
(position) => {
let lat = position.coords.latitude;
let lng = position.coords.longitude;
// console.log("真实定位:", lat, lng);
// 2. H5 端打开地图选择(自动以你的真实位置为中心)
uni.chooseLocation({
// H5 端会自动使用你刚定位的坐标!
success: async (res) => {
// console.log("最终选择的位置:", res);
if (res.latitude && res.longitude) {
carwashInfo.lng = res.longitude
carwashInfo.lat = res.latitude
carwashInfo.page = 1
getcarWash();
} else {
sheep.$helper.toast('您暂未选择地址');
}
},
fail: (err) => {
console.log("地图选择失败", err);
}
});
},
(err) => {
// 定位失败原因
let msg = "";
switch (err.code) {
case 1:
msg = "请允许定位权限";
break;
case 2:
msg = "无法获取位置,请打开GPS";
break;
case 3:
msg = "定位超时";
break;
default:
msg = "定位失败";
}
uni.showToast({
title: msg,
icon: "none"
});
}, {
enableHighAccuracy: true, // 高精度
timeout: 10000,
maximumAge: 0
}
);
}
3.实现效果
需要注意的是,如果是在微信开发者工具中打开,他会默认是当前城市的市政府位置,具体咋回事我也不清楚,求解答?

如果是在微信开发者工具打开的h5页面,则会打不开这个地图选址,都是正常的,请不要慌
所以必须要在手机上打开,然后去测试


小程序和h5运行好之后,都有这个预览的功能,你点击他生成一个二维码,然后手机微信扫码即可
最后在手机上运行的效果如下,就证明你成功完成了。我这里就打码了啊


最后感谢参考!
更多推荐

所有评论(0)