uniapp使用腾讯位置服务地图选点
效果图
文章来源:https://www.toymoban.com/news/detail-596069.html
1. 在公众平台申请插件
- “微信小程序官方后台-
设置
-第三方服务-插件管理” 里点击添加插件
,搜索腾讯位置服务地图选点
申请,审核通过后,小程序开发者可在小程序内使用该插件。
2. 引入插件
- 在
pages.json
中引入插件,根据个人需求,这里是在分包中引入插件
{
"root": "hotel",
"pages": [{}],
"plugins": {
"chooseLocation": {
"version": "1.0.9",
"provider": "wx76a9a06e5b4e693e" // 地图选点的APPID
}
}
}
3. 设置定位授权:
- 在
manifest.json
微信小程序配置中勾选位置接口
权限并填写原因
文章来源地址https://www.toymoban.com/news/detail-596069.html
4. 使用插件
- 根据个人需求调整,我这里新建一个页面调用插件,处理地图返回数据后,再返回上一页
- 从地图选点插件返回后,在页面的onShow生命周期函数中能够调用插件接口,取得选点结果对象
<template>
<view>
</view>
</template>
<script>
const chooseLocation = requirePlugin('chooseLocation');
export default {
data() {
return {
}
},
onLoad() {
// 1. 插件页面调用
let latLng = uni.getStorageSync('location');
const key = this.$config.mpKey; // 使用在腾讯位置服务申请的key
const referer = 'xx商城'; // 调用插件的app的名称
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() {
// 个人需求处理【A页面使用地图选点,点击跳转到此页面,得到数据后返回A页面】
let tmpVisit = uni.getStorageSync('isVisit')
if (!tmpVisit && tmpVisit != null) {
uni.navigateBack({
delta: 1
})
}
// 2. 如果点击确认选点按钮,则返回选点结果对象,否则返回null
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>
到了这里,关于uniapp微信小程序使用地图选点插件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!