微信小程序之实现地图定位(使用腾讯位置服务插件)
一. 腾讯位置服务插件简介
完整的地图能力
腾讯位置服务基于微信提供的小程序插件能力,专注于(围绕)地图功能,打造一系列小程序插件,可以帮助开发者简单、快速的构建小程序,是实现地图功能的最佳伙伴。
目前腾讯位置服务提供 路线规划、地图选点、地铁图 三款插件产品,本篇博客主要针对地图选点功能进行实现。
路线规划:提供地图路线规划功能。根据起终点,智能规划驾车、公交、步行出行路线及详情。开发者可以将路线规划插件嵌入到自建小程序的页面里,实现路线规划功能。
地铁图:支持全国重点城市地铁线路静态展示、信息查询、线路检索及规划功能。
地图选点:快速、准确地选择并确认自己的当前位置,并将相关位置信息回传给开发者。同时还提供位置检索、关键词分类等辅助功能。
地图插件的优势
丰富的插件市场:丰富的地图插件产品,为开发者提供更多的选择,满足不同的应用场景。
节约开发成本:插件本身具有强大的灵活性,无需开发者投入专业的人力研发,就可以拥有地图能力,缩减企业研发成本。
专业的行业方案:腾讯位置服务专注于地图能力,多年服务政企、美团、京东、滴滴等大客户的经验,锻造了更加专业的产品并提供更优秀的行业解决方案。
二. 开通腾讯位置服务
1.进入微信公众平台
https://mp.weixin.qq.com/
2.登录进入小程序后台,选择 “开发 - 开发工具 - 腾讯位置服务”
3.点击 “开通”,进入授权扫码界面
4.使用微信扫码进行授权
5.绑定开发者账号
三. 接入插件
1.在小程序后台,选择 “设置 - 第三方设置 - 插件管理”,点击 “添加插件”
2.搜索 “腾讯位置服务地图选点” 进行添加
四. 开发者密钥配置
1. 申请开发者密钥
进入腾讯位置服务平台:
https://lbs.qq.com?lbs_invite=Y9PRFLY
注册或登录后,申请开发者密钥:
PS: 成功申请密钥后才可以调用腾讯位置服务官网提供的相关服务;
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. 效果实现
微信小程序之实现地图定位(使用腾讯位置服务插件)相关推荐
- 微信小程序map组件地图定位当前位置
小程序map组件的应用方式:简单版 wxml: <map id="map" latitude="{{latitude}}" longitude=" ...
- 我的微信小程序入门学习-地图定位
微信小程序开发者工具安装和创建小程序 (地图定位代码) 地图定位案例:最后附带小程序地图定位代码 小程序简介 小程序特点 体验好(编译包不超过1M) "无须安装,即用即走"的特性让 ...
- 微信小程序获取百度地图定位
1.指定按钮获取定位 <van-col class="playActive" @click="getLocal()" span="5" ...
- qq位置如何用启动百度地图定位服务器,腾讯位置服务API快速入门
前言 之前项目有个需求,在网页上显示微信发送过来的位置信息,该开始想用百度地图,后来发现腾讯地图相对简单一点 快速入门 申请Key 引入js 把###替换成你申请的key 定义容器 设置好宽高度 设置 ...
- 微信小程序:获取地理定位和显示相应的城市名称。
最近在看微信小程序,遇到地理定位显示城市名称的问题.本文就是记录这一过程. 解决方案 ...
- api 定位 微信小程序 精度_聊聊微信小程序内置地图定位的精确性
前段时间,一个客户说到,我们给做的 菜齐了小程序 商家定位的地图不准确!用户想要去小程序指定的商家,从微信地图入口导航到所需要的地点差了有上百米! 上百米,这距离可够地远的,这怎么可能啊?我们一一查看 ...
- 企业微信小程序_获取准确定位的方法及解决定位不准确的问题
文章目录 一.经验分享 1. 微信api现状 2. 解决方案 3. 适用场景 二.小程序集成腾讯定位服务 2.1. 注册腾讯开发者 2.2. 创建应用 2.3. 添加key 2.4. 下载sdk 2. ...
- 微信小程序_map组件实现定位
微信小程序_map组件实现定位 map组件 这是官方提供的地图组件,很多复杂的功能我暂时没有接触到,而且有的效果似乎只有企业可以使用.我在这里就简单的实现一下map组件的定位用户的位置的功能. 下面的 ...
- uni-app 中微信小程序使用高德地图等第三方 SDK的方法
获取SDK 首先在高德开放平台,注册账号并且申请相关的 key 等信息: 然后下载它的微信小程序版 SDK:微信小程序 SDK 然后填写app包名,申请原生sdk的appkey信息,但不需要下载原生s ...
最新文章
- 下划线在 Python 中的特殊含义
- AI 模型性能上不去?这真的不怪我,ImageNet 等数据集每 100 个标签就错 3 个!...
- Android之四大组件(Activity)
- C语言预处理命令分类和工作原理
- 关于WPF中Popup中的一些用法的总结
- ios把数据传递到另一个页面_iOS页面跳转及数据传递(三种)
- 图机器学习在度小满风控中的应用
- 详解MessageBox(),MsgBox函数的正确使用
- vector 详解(C++)
- JavaScript 复习之 XMLHttpRequest 对象
- 软件工程总结笔记——软件结构设计(四)
- CPI、PPI、PMI
- mysql闪现_css,javascript_点击按钮出现弹窗,弹窗只是闪现了一下,为什么没有一直出现?,css,javascript - phpStudy...
- Redis:Error starting userland proxy: listen tcp4 0.0.0.0:6379: bind: address already in use
- 获取一个月有多少天,生成日历
- 嵌入式培训多少钱?嵌入式学习要了解这些内容!
- 统筹规划题:“服装店4个小组15天最多做多少套衣服裤子”的思路
- C#中BackgroundImage与Image的区别
- 人工智能技术并非已经完全成熟,而进入发展应用的阶段
- python线程和c++线程的区别_Python、线程、吉尔和C++
热门文章
- vimdiff颜色设置 + vimrc设置 (copied)
- Java实现图片上传到服务器
- atof函数(把字符串转换成浮点数)
- android 全景usb 全景,汽车360度全景USB高清数字信号输出系统的制作方法
- 服务器,socket服务。
- Communication error with Jack server
- 在智能制造背景下,MES有哪些发展趋势?
- C++中pow()函数
- Nat. Rev. Genet. | 通过可解释人工智能从深度学习中获得遗传学见解
- PHP云招聘系统H5(源码+数据库脚本)