微信小程序 使用腾讯地图SDK详解及实现步骤


Posted in Javascript onFebruary 28, 2017

微信小程序 使用腾讯地图SDK详解及实现步骤

 近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下!

使用起来非常简单,就是一些功能还有待完善。

官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html

步骤:

  1. 申请开发者密钥(key):申请密匙
  2. 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0
  3. 安全域名设置,需要在微信公众平台添加域名地址https://apis.map.qq.com
  4. 小程序示例
// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 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);
   }
 });
})

结果效果图:

微信小程序 使用腾讯地图SDK详解及实现步骤

去购彩.png

5.核心类

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");
var qqmapsdk;
Page({
 data: {
resData: []
 },
 onLoad: function (options) {

// 实例化腾讯地图API核心类

qqmapsdk = new QQMapWX({

 key: 'HPNBZ-B426V-CZQPP-UN4R6-QYOF2-MYFU3'//此处使用你自己申请的key

});
 },
 onShow: function () {

var that = this;

// 腾讯地图调用接口

qqmapsdk.search({

 keyword: '彩票',

 page_size: 20,

 success: function (res) {


console.log(res);


var resData = res.data;


for (var i = 0; i < resData.length; 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>
     </view>
    </view>
   </view>
  </view>
 </view>
</view>
</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'
 to:[{
   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 另外还有以下功能,就不一一演示了。

  1. getCityList(options:Object):获取全国城市列表数据;
  2. getDistrictByCityId(options:Object):通过城市ID返回城市下的区县;
  3. reverseGeocoder(options:Object):用于获取输入关键字的补完与提示,帮助用户快速输入
  4. geocoder(options:Object):提供由地址描述到所述位置坐标的转换,与逆地址解析reverseGeocoder()的过程正好相反。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
基于Jquery的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
eslint 的三大通用规则详解
May 16 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
Vue.js父与子组件之间传参示例
Feb 28 #Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 #Javascript
JS对象创建的几种方式整理
Feb 28 #Javascript
js仿淘宝评价评分功能
Feb 28 #Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 #Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 #Javascript
JavaScript Uploadify文件上传实例
Feb 28 #Javascript
You might like
PHP的autoload机制的实现解析
2012/09/15 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
JS中操作JSON总结
2020/12/06 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
Python实现的括号匹配判断功能示例
2018/08/25 Python
python交易记录整合交易类详解
2019/07/03 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
使用python实现对元素的长截图功能
2019/11/14 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
英文自荐信范文
2015/03/25 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
摩登时代观后感
2015/06/03 职场文书
销售人员管理制度
2015/08/06 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server