调用微信小程序位置插件# 在uniapp中调用微信小程序的腾讯地图API插件功能
# 准备工作
1.获取腾讯位置服务密钥
2.根据各插件需要引入对应资源
// qqMap.js
export const QQMAP_KEY = 'H2BBZ-3PRW3-3KH3E-3KKJQ-UUKQH-HNBJE' //使用在腾讯位置服务申请的key
export const QQMAP_REFERER = 'PYL-miniprogram' //调用插件的app的名称
// 获取定位权限和位置信息
export const getLocation = (require = false) => {
return new Promise((resolve, reject) => {
uni.showLoading({
title: '正在获取当前位置',
mask: true
})
uni.getLocation({
type: 'gcj02',
success: res => {
console.log('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + res.latitude);
const location = {
latitude: res.latitude,
longitude: res.longitude
}
resolve(location)
},
fail: error => {
console.log("获取位置信息失败", error)
uni.showModal({
title: '提示',
confirmText: '去授权',
cancelText: require ? '退出' : '取消',
content: '获取位置信息失败，请授权打开定位',
success: (res) => {
if (res.confirm) {
// 判断平台
uni.getSystemInfo({
success: (sys) => {
if (sys.platform == 'ios') {
plus.runtime.openURL("app-settings://");
} else {
var main = plus.android.runtimeMainActivity();
var Intent = plus.android.importClass("android.content.Intent");
//可能应该直接进入应用列表的权限设置？=> android.settings.APPLICATION_SETTINGS
var mIntent = new Intent('android.settings.LOCATION_SOURCE_SETTINGS');
main.startActivity(mIntent);
}
}
})
wx.openSetting({
success: data => {
data.authSetting['scope.userLocation']
}
})
} else if (res.cancel) {
if (require) {
uni.navigateBack()
}
}
},
fail: () => {
uni.$u.toast('获取位置信息失败')
}
})
},
complete: () => {
uni.hideLoading()
}
});
})
}
// 路线规划插件
export const routePlan = (name, latitude, longitude) => {
let plugin = requirePlugin('routePlan'); //加载插件
let endPoint = JSON.stringify({ //终点
name: name,
latitude: parseInt(latitude),
longitude: parseInt(longitude)
});
uni.navigateTo({
url: `plugin://routePlan/index?key=${QQMAP_KEY}&referer=${QQMAP_REFERER}&endPoint=${endPoint}`
});
}
// 城市选择器插件
export const citySelector = hotCitys => {
uni.navigateTo({
url: `plugin://citySelector/index?key=${QQMAP_KEY}&referer=${QQMAP_REFERER}&hotCitys=${hotCitys}`,
})
}
// 地图选点插件
export const chooseLocation = (category) => {
const location = JSON.stringify({
latitude: parseInt(latitude),
longitude: parseInt(longitude)
});
uni.navigateTo({
url: `plugin://chooseLocation/index?key=${QQMAP_KEY}&referer=${QQMAP_REFERER}&location=${location}&category=${category}`
});
uni.navigateTo({
url: `plugin://chooseLocation/index?key=${QQMAP_KEY}&referer=${QQMAP_REFERER}&category=${category}`
});
}
// 逆地址解析(坐标转省市区)
export const reverseGeocoder = (latitude, longitude) => {
let QQMapWX = require('@/common/qqmap-wx-jssdk.min.js') // 引入SDK核心类
let qqmapsdk = new QQMapWX({ key: QQMAP_KEY }) // 实例化API核心类
return new Promise((resolve, reject) => {
qqmapsdk.reverseGeocoder({
location: {
latitude,
longitude
},
success: res => {
let province = res.result.ad_info.province
let city = res.result.ad_info.city
let district = res.result.ad_info.district
const pcd = {
province,
city,
district
}
resolve(pcd)
},
fail: res => {
console.log(res);
},
complete: res => {
// console.log(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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
# 在组件中使用
以地图选点插件为例
<template>
<view @click="openMap">
打开地图选点
</view>
</template>
<script>
import {onShow,onUnload} from "@dcloudio/uni-app";
// #ifdef MP-WEIXIN
import { chooseLocation, getLocation} from "@/common/qqmap.js"; // 引入脚本
const chooseLocationBack = requirePlugin("chooseLocation"); // 微信小程序语法引入插件
// #endif
onShow(()=>{// 监听页面打开,触发回调获取地图选择后的回调数据
// #ifdef MP-WEIXIN
const location = chooseLocationBack.getLocation();
if(location){
console.log(location)
}
// #endif
})
onUnload(()=>{
// #ifdef MP-WEIXIN
chooseLocationBack.setLocation(null); // 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
// #endif
})
// 打开地图插件
const openMap=()=>{
chooseLocation('住宅区')
}
</script>
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
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