微信小程序地图定位开发教程
前言
目前腾讯位置服务提供路线规划、地图选点、地铁图、城市选择器插件四款插件产品,本篇博客主要针对地图选点功能进行实现。
开通腾讯位置服务
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生命周期函数中能够调用插件接口,取得选点结果对象// 如果点击确认选点按钮,则返回选点结果对象,否则返回nullconst 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
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
微信小程序地图定位开发教程相关推荐
- 微信小程序应用号开发教程!博卡君通宵吐血赶稿
微信应用号(微信公众平台小程序,「应用号」的新称呼)终于来了!开源中国社区的博卡君通宵吐血赶稿写出的微信公众平台应用号开发教程!大家赶紧来学习一下吧 对了,昨天晚间微信小程序开发文档官方版发布了 微信 ...
- 腾讯地图小程序服务器配置,腾讯地图实现微信小程序地图定位教程
前言 目前腾讯位置服务提供路线规划.地图选点.地铁图.城市选择器插件四款插件产品,本篇博客主要针对地图选点功能进行实现. 开通腾讯位置服务 2.登录进入小程序后台,选择 "开发 - 开发工具 ...
- 腾讯地图实现微信小程序地图定位教程
前言 目前腾讯位置服务提供路线规划.地图选点.地铁图.城市选择器插件四款插件产品,本篇博客主要针对地图选点功能进行实现. 开通腾讯位置服务 1.进入微信公众平台 2.登录进入小程序后台,选择 &quo ...
- 微信小程序CMS系统开发教程开发初级
学习了大神分享的微信小程序开发教程,自己也过了一遍,也在此下笔记记录,留下自己的学习成果. l 首先搭建好小程序的布局. 解析: 1.Images文件夹存放图片. 2.Detail文件夹是系统文章的 ...
- 微信小程序小白入门开发教程(第二弹)
文章目录 推荐刚需 (一)UI 框架 1.iView Weapp 2.WeUI 3.Vant Weapp 4.ColorUI 5.Thor UI (二).基础框架 1.WePY 2.Taro 3.Un ...
- 情侣积分微信小程序零基础开发教程(附代码及开发指南)
To Our Loves 本文最新版本 0 情侣积分互动小程序 在idofSunChonggao 的基础上进行开发, 感谢! 且感谢初版(UxxHans)! ⭐ 如果本仓库对您有所帮助,您的fork或 ...
- 微信小程序订阅消息开发教程及代码(java后端实现)
1.配置消息模板,微信订阅消息需要固定的模板 小程序后台地址:点击进入 2.小程序前端订阅 大多数模板是一次订阅,永久订阅需要指定的机构或组织,具体可以参考官方文档. 用户在小程序内点击按钮触发消息订 ...
- 微信小程序地图定位GPS转腾讯地图的坐标系
//svar GPS = {PI: 3.14159265358979324,x_pi: 3.14159265358979324 * 3000.0 / 180.0,delta: function (la ...
- 微信小程序获取定位后使用腾讯地图解析到市位置
微信小程序获取定位解析当前城市位置 咱们就话不多说,这呢是我第一次发布文章,第一次使用,所以使用的也比较简单,也还不是很熟悉,接下来呢就直接上代码吧,希望喜欢的朋友可以关注关注嘿嘿 首先我们需要引入腾 ...
最新文章
- 利用smarty生成静态页的关键代码
- 【Alljoyn】 Alljoyn学习笔记六 Alljoyn基本概念
- 嵌入式系统开发怎样快速度入门
- vue-cli-service不是内部或外部命令,也不是可运行的程序
- 每天进步一点点《ML - 基于层次的聚类》
- Flex布局演示01
- TikTok:将禁止加密货币广告投放
- 【转】Delphi实现自动发贴和识别验证码 王泽宾
- Go 用JSON加载表格数据
- UVa 1513 Movie collection 树状数组
- 解决Charles Response 中文乱码
- 解读BOLT引擎例子——HelloBolt2
- 基于中间件的开发---中间件技术
- 64位微型计算机64指技术指标,\\\64位微型计算机\\\中的64,是指下列技术指标中的...
- linux系统ss命令详解,ss命令 - Linux命令大全 | linux教程
- Python基础:第25课——使用类和实例
- 内网漫游(lateral movement)的破解之道
- VS2012 MFC + OpenCV
- js中如何遍历对象属性
- Spring Boot 的发展史介绍
热门文章
- 为何越来越多的人想离婚?越来越多的人不想结婚?
- 鸿蒙系统如何开启快捷方式,鸿蒙系统功能介绍-华为鸿蒙系统功能详细介绍 - 系统家园...
- 独家 | 机器学习解释模型:黑盒VS白盒(附资料链接)
- Qt 多文本框设置行距和
- Python|报错解决|os.symlink: FileExistsError
- nginx根据设备类型进行url重定向
- 制作一个电影分享网站的微信公众号
- java-net-php-python-java作业批改系统的设计PPT计算机毕业设计程序
- GCB:农田土壤丰富真菌比稀有真菌适应更广(一作解读+主图重现)
- CodeForces - 497D Gears