微信小程序 使用腾讯地图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 相关文章推荐
JavaScript实现自动变换表格边框颜色
May 08 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
React组件的三种写法总结
Jan 12 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
javascript实现左右缓动动画函数
Nov 25 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简介
2006/10/09 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
Python图算法实例分析
2016/08/13 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
python对日志进行处理的实例代码
2018/10/06 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
python属于软件吗
2020/06/18 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
成人大专自我鉴定范文
2013/10/19 职场文书
学校司机岗位职责
2013/11/14 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
西岭雪山导游词
2015/02/06 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
八年级作文之感恩
2019/11/22 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL