uniapp微信小程序使用地图选点插件

uniapp使用腾讯位置服务地图选点

文章目录

uniapp使用腾讯位置服务地图选点
- 效果图
- 1. 在公众平台申请插件
- 2. 引入插件
- 3. 设置定位授权：
- 4. 使用插件

效果图

1. 在公众平台申请插件

“微信小程序官方后台-设置-第三方服务-插件管理” 里点击 添加插件，搜索 腾讯位置服务地图选点 申请，审核通过后，小程序开发者可在小程序内使用该插件。

2. 引入插件

在pages.json中引入插件，根据个人需求，这里是在分包中引入插件

{"root": "hotel","pages": [{}],"plugins": {"chooseLocation": {"version": "1.0.9","provider": "wx76a9a06e5b4e693e" // 地图选点的APPID}}
}

3. 设置定位授权：

在manifest.json微信小程序配置中勾选位置接口权限并填写原因

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; // 使用在腾讯位置服务申请的keyconst 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. 如果点击确认选点按钮，则返回选点结果对象，否则返回nullconst 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微信小程序使用地图选点插件相关推荐

uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
uniapp微信小程序 map地图markers图标不显示,markers图标真机调试不显示举例: 预期效果如下,蓝色为用户位置,红色为店铺位置均为自定义图标实际发布后手机上的效果 (此处忽略位置 ...
uniapp 微信小程序选择地图位置并返回经纬度及详细地址（uni.chooseLocation和高德地图api两种方式实现）
uniapp 微信小程序实现选择地图位置功能最近在做商家小程序,就是用于给实体店老板进行网上开店的小程序. 其中有一项功能就是获取商店的位置,要求支持:获取当前定位/检索到指定位置/地图选点等功能, ...
uniapp微信小程序引入第三方广告插件
以Slime广告插件为例. 一.微信小程序后台申请相关插件二.manifest.json文件 "mp-weixin" : {"appid" : "* ...
uniapp微信小程序实现地图导航
利用点击事件调用handleMapLocation()这个方法时获取了自己的定位,考虑到用户拒绝获取自己的定位所以当用户再次点击后会唤起设置让用户打开定位 handleMapLocation() { ...
uniapp微信小程序支付券或商家券插件
小程序发券插件API https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter9_3_1.shtml 注意:支持商户在小程序场景内,向指定用户发放指定 ...
微信小程序百度地图API移动选点
微信小程序百度地图API移动选点本文首发微信小程序百度地图API移动选点因为业务需要使用百度地图API,参考一位大佬编写腾讯API的思路和方法,改造成百度地图API移动选点. 思路: wxml前端 ...
uniapp微信小程序图片裁剪插件，支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式
qf-image-cropper2.0 图片裁剪插件 1.效果预览: 2.平台支持: 1.支持微信小程序(移动端.PC端.开发者工具) 2.H5平台(2.1.0版本起) 3. 支持APP平台(2.1. ...
uniapp - 微信小程序接入腾讯视频播放器功能插件，uniapp开发微信小程序端调用引入并使用腾讯视频播放组件完整全流程（详细示例源码，一键复制开箱即用）
效果图在uniapp 微信小程序项目中,集成腾讯视频功能插件,实现播放腾讯视频效果,附带详细示例源码及注释, 你可以跟着步骤一步步来,保证几分钟就能快速在uniapp小程序项目中植入腾讯视频功能! ...
uni-app 微信小程序地图增加标记点，并实现点击弹窗
项目需求,在微信小程序的地图中,实现打点,然后点击某个点要能弹出关于这个点的某些信息,同时在当前点跳到其他点时,对应信息也要替换,点击空白处要关闭弹窗,在此做个记录最终实现效果如图 (展示用的是小程 ...

uniapp微信小程序使用地图选点插件

uniapp使用腾讯位置服务地图选点

文章目录

效果图

1. 在公众平台申请插件

2. 引入插件

3. 设置定位授权：

4. 使用插件

uniapp微信小程序使用地图选点插件相关推荐

最新文章

热门文章