微信小程序地图定位开发教程
2021/5/6 14:27:18
本文主要是介绍微信小程序地图定位开发教程,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
目前腾讯位置服务提供路线规划、地图选点、地铁图、城市选择器插件四款插件产品,本篇博客主要针对地图选点功能进行实现。
开通腾讯位置服务
1、进入微信公众平台
2、登录进入小程序后台,选择 “开发 - 开发工具 - 腾讯位置服务”
3、点击 “开通”,进入授权扫码界面
4、使用微信扫码进行授权
5、绑定开发者账号
接入插件
1、在小程序后台,选择 “设置 - 第三方设置 - 插件管理”,点击 “添加插件”
2、搜索 “腾讯位置服务地图选点” 进行添加
开发者密钥配置
1、申请开发者密钥
2、设置KEY的 “启用产品”
a、勾选微信小程序,设置授权 APP ID
授权 APP ID 可以通过 “设置 - 基本设置” 的账号信息进行查看
b、勾选 “WebService API”
小程序插件需要使用WebService API的部分服务,所以需要给使用该功能的KEY配置相应权限。
如果填写了域名白名单,需要把servicewechat.com
域名添加进域名白名单中,否则小程序下将无法正常使用WebServiceAPI服务。
插件的使用
1、引入插件
地图选点appId: wx76a9a06e5b4e693e
// app.json { "plugins": { "chooseLocation": { "version": "1.0.5", "provider": "wx76a9a06e5b4e693e" } } }
2、设置定位授权
地图选点插件需要小程序提供定位授权才能够正常使用定位功能
// app.json { "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序定位" } } }
3、代码实现
a、js代码
"use strict"; const chooseLocation = requirePlugin('chooseLocation'); Page({ data: { address: "", locationName: "" }, onShow: function () { // 从地图选点插件返回后,在页面的onShow生命周期函数中能够调用插件接口,取得选点结果对象 // 如果点击确认选点按钮,则返回选点结果对象,否则返回null const location = chooseLocation.getLocation(); if(location){ this.setData({ address: location.address?location.address : "", locationName: location.name?location.name : "" }); } }, //显示地图 showMap() { //使用在腾讯位置服务申请的key(必填) const key = ""; //调用插件的app的名称(必填) const referer = ""; wx.navigateTo({ url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer }); } });
plugin://chooseLocation/index
接口参数说明:
b、wxml代码
<!--index.wxml--> <view class="container"> <button bindtap="showMap">选择位置</button> <view style="margin-top:10px">地址:{{address?address:"暂无"}}</view> <view style="margin-top:10px">名称:{{locationName?locationName:"暂无"}}</view> </view>
4、效果实现
作者:盛夏温暖流年
链接:https://blog.csdn.net/j1231230/article/details/112352787
来源:CSDN
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
这篇关于微信小程序地图定位开发教程的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04微信小程序如何实现点击图片查看大图功能-icode9专业技术文章分享
- 2024-09-28uniapp 小程序获取到数据库的换行符怎么展示-icode9专业技术文章分享
- 2024-09-20微信小程序全栈项目实战:从零开始的全面指南
- 2024-09-20微信小程序项目实战:零基础入门教程
- 2024-09-19微信小程序项目中miniprogram_npm文件跟node_modules文件的差别-icode9专业技术文章分享
- 2024-08-27小程序 单行显示,超出部分省略号显示的方法代码-icode9专业技术文章分享
- 2024-08-27微信小程序如何获取到特种设备的刘海屏高度-icode9专业技术文章分享
- 2024-08-27微信小程序如何获取苹果手机底部一横线高度信息方法代码-icode9专业技术文章分享
- 2024-08-27微信小程序 顶部状态栏标签背景为none但还是看不到状态栏什么原因-icode9专业技术文章分享
- 2024-08-21微信小程序全栈入门:从零开始的一站式指南