uniapp mp-wx 项目实战 —— 通过腾讯地图获取定位_uniapp小程序 maps获取个人定位

uniapp 引入腾讯地图，判断用户是否开启权限，获取用户当前位置

app（app端）

app 打开外部地图导航，点击右侧超链接查看：@xniYa!，目前没做过 app端 有需求 大家自行点击查看，可能二期项目有需求，到时候再更新，目前没做过，就不过多，误导大家。

mp-wx（小程序端）

mp-wx map 默认使用腾讯地图，所有 经纬度 一定要 **Number（）**处理一下 经纬度的类型

6.12 更新 腾讯地图api 申请，以及项目内部配置，参考 @不苒

• 点击 -->> 腾讯位置服务，官方文档：项目中使用腾讯地图 api，以及获取用户当前经纬度流程
• 第一步申请 腾讯地图 密钥key
• 开通 webserviceAPI 服务
• 下载微信小程序JavaScriptSDK，微信小程序，点击下载 SDK（两个版本，根据实际情况选择） -->> JavaScriptSDK v1.1 JavaScriptSDK v1.2
• 配置安全域名，小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加 https://apis.map.qq.com

如果实在不明白，请看 点击–>> @不苒 ，写的很完善，并且是图文说明。

使用腾讯地图获取定位时候，可能涉及到 手机权限未开启，我这边是在 @不苒 的基础上进行完善：

			data() {
			return {
				position: '',
		},

		onLoad() {
			this.getSystemInfo()
		},

		methods: {
			async getSystemInfo() {
				uni.getSystemInfo({
					success: (res) => {
						if (!res.locationEnabled || !res.locationAuthorized) {
							uni.showToast({
								title: '请确保手机系统定位已开启',
								icon: 'none',
								duration: 2000,
							})
						} else {
							const location = this.getLocationInfo();
							this.position = location.address
							console.log(location.address)
						}
					}
				})
			},

			//获取位置信息
			async getLocationInfo() {
				return new Promise((resolve) => {
					//位置信息默认数据
					let location = {
						longitude: 0,
						latitude: 0,
						province: "",
						city: "",
						area: "",
						street: "",
						address: "",
					};
					uni.getLocation({
						type: "gcj02",
						success(res) {
							location.longitude = res.longitude;
							location.latitude = res.latitude;
							// 腾讯地图Api
							const qqmapsdk = new QQMapWX({
								key: ''// 腾讯地图Api key
							});

							qqmapsdk.reverseGeocoder({
								location,
								success(response) {
									let info = response.result;
									console.log(info);
									location.province = info.address_component.province;
									location.city = info.address_component.city;
									location.area = info.address_component.district;
									location.street = info.address_component.street;
									location.address = info.address;
									resolve(location);
								},
							});
						},
						fail(err) {
							console.log(err)
							resolve(location);
						},
					});
				});
			},

			
	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

map 配合使用的 api

1. uni.getLocation ，获取当前的地理位置、速度；
2. uni.openLocation ，使用应用内置地图查看位置；
3. uni.onLocationChange ，监听实时地理位置变化事件；

uni.getLocation

" uni.getLocation获取定位fail报错问题汇总 " 参考： 铁锤妹妹@

" Error: 系统错误，错误码：80058,desc of scope.userLocation is empty [][] " 参考：Ming-Afresh

uni.getLocation({
	type: 'wgs84', // type值  默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标
	success: function (res) {
		console.log('当前位置的经度：' + res.longitude);
		console.log('当前位置的纬度：' + res.latitude);
	}，
	fail:(err)=>{
		console.log("获取失败",err)
		
		// 'getLocation:fail auth deny', 'getLocation:fail:auth denied', 
		// 'getLocation:fail authorize no response' ：用户在小程序中未授权 （新老版本、平台返回不同）
		// 'getLocation:fail system permission denied'：未给微信位置授权					'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF'：没开启系统定位
		// 'getLocation:fail:ERROR_NETWORK'：网络异常
		// 'getLocation:fail:timeout'：定位超时

	}
});

// 在文件的 manifest.json 目录下，点源码视图，添加如图代码(切记位置不要写错了),否则 uni.getLocation 一直 fail

"permission" : {
            "scope.userLocation" : {
                "desc" : "你的位置信息将用于小程序接口效果展示"
            }
        },
		"requiredPrivateInfos": [
				"getLocation"
		]
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

uni.openLocation

1. 打开内置地图，个人试过在 uni.getLocation success 之后调用，但是失效了，单独使用就可以打开内置地图，从而实现打开外部地图app；（ uni.getLocation 调用 success 之后，调用 uni.openLocation 参考：
   过期の秋刀鱼
   ，后期如果大家成功了，麻烦评论区告我一下）

2. 另一种跳过打开内置地图，直接打开外部地图app：（ 方法2参考：惊悚的毛毛虫
   ，本人业务对此有所需求，但是参考demo，与实际项目需求差距过大，最迟 6月16号，更新该方法的代码示例，以及 后期 map 实际使用更为完整的流程 ）

   实现逻辑 依赖 map ，map 如果业务需求不展示 display:none; 如需展示则赋值给 map组件 属性id即可。只是调用组件内的 openMapApp 方法

需要打开内置地图，从而进行打开外部地图 app
代码示例如下：

<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers"
					@markertap="ontap()">
				</map>
			</view>
		</view>
	</view>
</template>
1
2
3
4
5
6
7
8
9
10
11

	// data
	id: 0, // 使用 marker点击事件 需要填写 id 类型需要强制 number
	title: 'map',
	name: 'name', 
	latitude: 39.909,
	longitude: 116.39742,
	covers: [{
		latitude: 39.909,
		longitude: 116.39742,
		iconPath: ''
	}, {
		latitude: 39.90,
		longitude: 116.39,
		iconPath: ''
	}]
	
	// methods
	function() {  // function 自定义（事例）
		uni.getSystemInfo({
			success: (res) => {
				if (!res.locationEnabled || !res.locationAuthorized) {
					uni.showToast({
						title: '请确保手机系统定位已开启',
						icon: 'none',
						duration: 2000,
					})
				} else {
					// uni.getLocation({
					//  success: function(res) {
					//  调用 uni.openLocation 失效
					// 	},
					// 	fail: function(err) {
					// 	}
					// });
						uni.openLocation({
							latitude: Number(this.latitude),
							longitude: Number(this.longitude),
							// 目标位置的名称
							name: 'name',
							// 目标位置的详细地址
							address: 'address',
、							// 地图缩放比例
							scale: 18,
							success: function(res) {
								console.log('success', res);
							}
						});
					}
				}
			})
		},
		
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

未完，敬请期待

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/514675