uniapp使用腾讯位置服务地图选点
文章目录
- uniapp使用腾讯位置服务地图选点
- 效果图
- 1. 在公众平台申请插件
- 2. 引入插件
- 3. 设置定位授权:
- 4. 使用插件
效果图
1. 在公众平台申请插件
- “小程序>微信小程序官方后台-
设置
-第三方服务-插件管理” 里点击 添加插件
,搜索 腾讯位置服务地图选点
申请,审核通过后,小程序开发者可在小程序内使用该插件。
2. 引入插件
- 在
pages.json
中引入插件,根据个人需求,这里是在分包中引入插件
{
"root": "hotel",
"pages": [{}],
"plugins": {
"chooseLocation": {
"version": "1.0.9",
"provider": "wx76a9a06e5b4e693e"
}
}
}
3. 设置定位授权:
- 在
manifest.json
小程序>微信小程序配置中勾选位置接口
权限并填写原因
4. 使用插件
- 根据个人需求调整,我这里新建一个页面调用插件,处理地图返回数据后,再返回上一页
- 从地图选点插件返回后,在页面的onShow生命周期函数中能够调用插件接口,取得选点结果对象
<template>
<view>
</view>
</template>
<script>
const chooseLocation = requirePlugin('chooseLocation');
export default {
data() {
return {
}
},
onLoad() {
let latLng = uni.getStorageSync('location');
const key = this.$config.mpKey;
const referer = 'xx商城';
const location = JSON.stringify({
latitude: latLng.latitude,
longitude: latLng.longitude
});
const category = '酒店宾馆,旅游景点';
uni.navigateTo({
url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`
})
},
onShow() {
let tmpVisit = uni.getStorageSync('isVisit')
if (!tmpVisit && tmpVisit != null) {
uni.navigateBack({
delta: 1
})
}
const location = chooseLocation.getLocation();
if (location) {
uni.removeStorageSync('isVisit')
this.$store.commit('setChooseAdr', location);
}
},
onHide() {
uni.setStorageSync('isVisit', false)
},
onUnload() {
chooseLocation.setLocation(null);
},
methods: {
}
}
</script>
<style>
</style>