微信小程序 使用腾讯地图SDK详解及实现步骤
转载 &更新时间：日 16:25:36 & 作者：吕周坤
这篇文章主要介绍了微信小程序 使用腾讯地图SDK详解及实现步骤的相关资料,需要的朋友可以参考下
微信小程序 使用腾讯地图SDK详解及实现步骤
　近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案，拿来给大家分享一下！
　　使用起来非常简单，就是一些功能还有待完善。
　　官方文档：http://lbs.qq.com/qqmap_wx_jssdk/index.html
申请开发者密钥（key）：申请密匙
下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0
安全域名设置，需要在微信公众平台添加域名地址https://apis.map.qq.com
小程序示例
// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
onLoad: function () {
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: '申请的key'
onShow: function () {
// 调用接口
qqmapsdk.search({
keyword: '彩票',
success: function (res) {
console.log(res);
fail: function (res) {
console.log(res);
complete: function (res) {
console.log(res);
结果效果图：
去购彩.png
5.1 地点搜索search(options:Object)
通过关键词keyword搜索周边poi，比如“酒店”“餐饮”“娱乐”“学校”等
去购彩界面的实现：
5.1.1 buy.js
// 引入腾讯地图SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var util = require("../../utils/util.js");
　　resData: []
　onLoad: function (options) {
　　// 实例化腾讯地图API核心类
　　qqmapsdk = new QQMapWX({
　　　key: 'HPNBZ-B426V-CZQPP-UN4R6-QYOF2-MYFU3'//此处使用你自己申请的key
　onShow: function () {
　　var that =
　　// 腾讯地图调用接口
　　qqmapsdk.search({
　　　keyword: '彩票',
　　　page_size: 20,
　　　success: function (res) {
　　　　console.log(res);
　　　　var resData = res.
　　　　for (var i = 0; i & resData. i++) {
　　　　　resData[i]._distance = util.formatDistance(resData[i]._distance);//转换一下距离的格式
　　　　that.setData({resData: resData});
　　　fail: function(res) {
　　　　console.log(res);
　　　complete: function(res) {
　　　　console.log(res);
// utils/util.js
* 将距离格式化
* &1000m时 取整,没有小数点
* &1000m时 单位取km,一位小数点
function formatDistance(num) {
　if (num & 1000) {
　　return num.toFixed(0) + 'm';
　} else if (num & 1000) {
　　return (num / 1000).toFixed(1) + 'km';
5.1.2 buy.wxml 主要样式采用weui
&view class="page"&
&view wx:for="{{resData}}" wx:key="shop" class="page__bd"&
&view bindtap="navTo" data-item="{{item}}"&
&view class="weui-panel"&
&view class="weui-panel__bd"&
&view class="weui-media-box weui-media-box_text"&
&view class="weui-media-box__title weui-media-box__title_in-text"&{{item.title}}&/view&
&view class="weui-media-box__desc"&{{item.address}}&/view&
&view class="weui-media-box__info"&
&view class="weui-media-box__info__meta"&电话：{{item.tel}}&/view&
&view class="weui-media-box__info__meta weui-media-box__info__meta_extra"&距离：{{item._distance}}&/view&
5.2 关键词输入提示getSuggestion(options:Object)
用于获取输入关键字的补完与提示，帮助用户快速输入。
// 调用接口
qqmapsdk.getSuggestion({
keyword: '技术',
success: function(res) {
console.log(res);
fail: function(res) {
console.log(res);
complete: function(res) {
console.log(res);
5.3 距离计算calculateDistance(options:Object)
计算一个点到多点的步行、驾车距离。
// 调用接口
qqmapsdk.calculateDistance({
mode: 'walking';//步行，驾车为'driving'
latitude: 39.984060,
longitude: 116.307520
latitude: 39.984572,
longitude: 116.306339
success: function(res) {
console.log(res);
fail: function(res) {
console.log(res);
complete: function(res) {
console.log(res);
5.4 另外还有以下功能，就不一一演示了。
getCityList(options:Object)：获取全国城市列表数据；
getDistrictByCityId(options:Object)：通过城市ID返回城市下的区县；
reverseGeocoder(options:Object)：用于获取输入关键字的补完与提示，帮助用户快速输入
geocoder(options:Object)：提供由地址描述到所述位置坐标的转换，与逆地址解析reverseGeocoder()的过程正好相反。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具关于微信公众号开发调用jssdk接口以及腾讯地图API
一，调用支付接口
1.必须引入权限的js
&script src="js/jweixin-1.0.0.js"&&/script&
2.js部分的初始化配置
paymentAuthorization();//页面支付权限授权
// 点击支付
$("#Save_Patient_Msg").click(function(){
$("#Save_Patient_Msg").hide();$(".weui-loadmore").show();var productId = $("#productId").val();var couponId = $("#couponId").val();var token = $("#token").val();$.post("home/getWXPayMsg", {productId : productId,couponId : couponId,token : token}, function(result) {if (result.status == "ok") { // 这里调用微信的支付功能进行支付wx.chooseWXPay({ timestamp: result.data.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符nonceStr: result.data.nonceStr, // 支付签名随机串，不长于 32 位package: result.data.packageStr, // 统一支付接口返回的prepay_id参数值,提交格式如：prepay_id=***signType: "MD5", // 签名方式，默认为?SHA1?，使用新版支付需传入?MD5?paySign: result.data.paySign, // 支付签名success: function (res) {if(res.errMsg == "chooseWXPay:ok"){$.alert("支付成功");setTimeout(function(){// 支付成功之后跳转静态的支付成功页面window.location.href = "home/paySuccess?token="+},2000);}else{$.alert(res.errMsg) }},cancel: function(res){$.alert('取消支付');}});}else{$.alert('请求支付信息失败');}});}); // 微信支付授权function paymentAuthorization(){var url = location.href.split('#')[0];$.post("weixin/getJSSDKSign", {url:url}, function(data){// 通过config注入接口权限wx.config({
debug: false,
appId:data.signModel.appId,
timestamp: data.signModel.timestamp,
nonceStr: data.signModel.nonceStr,
signature: data.signModel.signature,
jsApiList: [
'chooseWXPay' ,// 微信支付
'checkJsApi'
})// 接口处理失败验证
wx.error(function(res){$.alert(res.errMsg)});// 微信支付接口 接口处理成功验证
wx.ready(function(){
wx.checkJsApi({
jsApiList: [
'chooseWXPay'
success: function (res) {
if (res.checkResult.chooseWXPay == false) {
alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
二，调用腾讯API访问用户当前定位以及打开微信内置地图
第一点，先去腾讯API申请所需密匙；
然后html页面引入Js
&script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=你的密匙"&&/script&
第二点切记：
在html页面的meta属性，引用如下几个，不然会影响微信内置地图的缩放
&meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"&
&meta name="full-screen" content="yes"&
&meta name="x5-fullscreen" content="true"&
var url = location.href.split('#')[0];
//获取当前地址，切记微信是要筛出#后面的地址$.post("weixin/getJSSDKSign", {url:url}, function(data){//通过config注入接口权限wx.config({
debug: false,
appId:data.signModel.appId,
timestamp: data.signModel.timestamp,//时间戳
nonceStr: data.signModel.nonceStr,//随机串
signature: data.signModel.signature,//签名
jsApiList: [
'checkJsApi' ,
'getLocation',//微信定位
'openLocation',
'chooseImage'
})//接口处理失败验证
wx.error(function(res){$.alert(res.errMsg)
});//接口处理成功wx.ready(function(){wx.checkJsApi({
jsApiList: [
'getLocation'
success: function (res) {
if (res.checkResult.getLocation == false) {
alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
}});wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标
success: function (res) {
var latitude = res. // 纬度，浮点数，范围为90 ~ -90
var longitude = res. // 经度，浮点数，范围为180 ~ -180。
var speed = res. // 速度，以米/每秒计
var accuracy = res. // 位置精度
var geocoder = new qq.maps.Geocoder({
complete: function (result) {
//解析成功的回调函数
var address = result.detail.address.substring(5);
//获取详细地址信息
$('#nowAddress').text('')
$('#nowAddress').text(address)//将解析出来的地址渲染到页面
geocoder.getAddress(new qq.maps.LatLng(latitude, longitude));
//周边设备位置展示
url:"nearby/getNearby",
data:{latitude:latitude,longitude:longitude},
type:"get",
dataType:"json",
success:function(data){
var reslut=data.//通过后台返回的数据列表渲染页面，这里采用的字符串拼接的方法
var html = ''if(reslut.length == 0){$('.siteList').remove()$('.noImg').show()$('.notNews').text('暂无相关信息')}else{$('.siteList').remove()for (var i = 0; i & reslut. i++) {html += '&div class="siteList"&'
+ '&div class="siteBoxNull"&'
+ '&/div&'
+ '&ul class="siteListBox-1"&'
+ '&p id="name"&' + reslut[i].name + '&/p&'
+ '&i&&/i&'
+ '&span class="first-span"&' + reslut[i].address + '&/span&'
+ '&span style="color:#333333;"&' + reslut[i].distance + "km" +'&/span&'
+ '&input type="hidden" value="'+reslut[i].longitude+'" id="longitude"/&'
+ '&input type="hidden" value="'+reslut[i].latitude+'" id="latitude"/&'
+ '&/div&'} }$('body').append(html)$('.siteList').on('click',function(){//切记IOS系统解析出来的经纬度地址是一个string类型的字符串，必选转换IOS系统才能访问var longitude = Number($(this).find('#longitude').val())var latitude = Number($(this).find('#latitude').val())var name = $(this).find('#name').text()var adress = $(this).find('.first-span').text()wx.openLocation({
latitude: longitude, // 纬度，浮点数，范围为90 ~ -90
longitude: latitude, // 经度，浮点数，范围为180 ~ -180。
name: name, // 位置名
address: adress, // 地址详情说明
scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转});})
cancel: function (res) {
alert('用户拒绝授权获取地理位置');
}}); });})
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！腾讯手机地图API
我的图书馆
腾讯手机地图API
1.&什么是腾讯手机地图API2.&使用需要注册吗3.&调用API有次数限制吗4.&使用API有什么限制条件5.&资质要求有哪些6.&地图API提供了哪些功能7.&API中使用什么坐标体系8.&坐标体系是否遵循国家对地理信息保密要求9.&数据覆盖情况如何10.&遇到其它问题怎么办
如果您在使用过程中遇到任何问题，可以随时通过以下方式联系我们：
1.2.加入QQ交流群：
1.&什么是腾讯手机地图API？
腾讯手机地图API（Android）是一套基于Android1.5及以上设备的应用接口，通过该接口，您可以方便地访问腾讯地图为您提供的高质量地点数据和服务，构建丰富而实用的地图及位置服务类应用。手机腾讯地图API除提供创建底图、缩放、平滑移图等基础功能外，还提供定位、地址解析、反地址解析，周边搜索、路线方案等拓展服务，助你在应用开发中事半功倍。地图API的服务需要注册，免费的向第三方提供，任何非盈利性网站均可使用。
2.&使用需要注册吗？
需要注册，腾讯手机地图API采用申请KEY策略，&您只要接受并认可 ，申请KEY，并按照
进行开发，即可直接调用。
3.&调用有次数限制吗？
目前腾讯手机地图API没有单日调用上限的限制。
4.&使用手机地图API有什么限制条件？
1、首先，您需要接受并认可；
2、需要在您的网站上显示腾讯手机地图LOGO；
3、您可以使用腾讯手机地图API所提供的功能来对API相关服务数据的结果进行展示，但不得直接存取、使用内部数据、图片、程序、模块或是任何其他腾讯地图的服务或功能。
5.&资质要求有哪些？
腾讯公司拥有国家测绘局颁发的互联网地图运营资质，用户可放心使用腾讯手机地图API来制作自己的引用程序。但这并不代表您可以随意运营地图服务，建议您参考国家测绘局颁发的具体条款进行应用开发。
6.&地图API提供了哪些功能？
腾讯手机地图API提供了基本的地图构建，POI搜索，地址解析，反地址解析，公交、驾车路线方案搜索；自定义图层等丰富功能，具体的内容您可以参考
或 详细阅读
进行进一步的了解。
7.&API中使用什么坐标体系？
腾讯手机地图API使用经纬度坐标，单位为“度”。
8.&坐标体系是否遵循国家对地理信息保密要求？
腾讯手机地图API对外接口的坐标系，都是经过国家测绘局加密处理，符合国家测绘局对地理信息保密要求。
9.&数据覆盖情况如何？
腾讯手机地图API中，提供：
1.&全国范围内的地图底图；
2.&300多个地级市，2000个多县/县级市的POI搜索；
3.&200多个城市的公交换乘方案检索；
4.&300多个城市的驾车方案检索。
10.&遇到其它问题怎么办？
在您使用腾讯手机地图API进行开发时，如果还遇到其它问题，您可以：
1.&仔细查阅 参考手册 ，确保调用语句符合接口要求
平台中查看类似问题或直接提问，会有专人为您解答；
3.&加入腾讯地图API讨论群，与更多的开发者交流讨论：
&&&&加入QQ交流群：
喜欢该文的人也喜欢微信小程序开发之地图API获取位置及调用腾讯地图_腾讯视频
三倍流畅播放
1080P蓝光画质
新剧提前看
1080P蓝光画质
纯净式无框播放器
三倍流畅播放
扫一扫 手机继续看
下载需先安装客户端
{clientText}
客户端特权:
3倍流畅播放
当前播放至 {time}
扫一扫 手机继续看
本节更新微信小程序中地图API，包括获取位置，打开内置腾讯地图显示位置，打开内置地图进行选择位置，找回中心点
副标题要不要
副标题要不要
副标题要不要
副标题要不要
副标题要不要
副标题要不要
副标题要不要
副标题要不要
副标题要不要
副标题要不要
副标题要不要
副标题要不要
副标题要不要
副标题要不要
副标题要不要
副标题要不要
副标题要不要
副标题要不要
副标题要不要
副标题要不要
副标题要不要