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运行好之后,都有这个预览的功能,你点击他生成一个二维码,然后手机微信扫码即可

最后在手机上运行的效果如下,就证明你成功完成了。我这里就打码了啊

最后感谢参考!

更多推荐