微信小程序 使用腾讯地图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 表单取值常用代码
Dec 22 Javascript
javascript中的array数组使用技巧
Jan 31 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
JS一次前端面试经历记录
Mar 19 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 UBB 解析实现代码
2011/11/27 PHP
php while循环得到循环次数
2013/10/26 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
布同自制Python函数帮助查询小工具
2011/03/13 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
python批量修改文件名的示例
2020/09/27 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
车间班长岗位职责
2013/11/30 职场文书
就业自荐信
2013/12/04 职场文书
文化宣传方案
2014/03/13 职场文书
活动策划求职信模板
2014/04/21 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
爱护草坪标语
2014/06/24 职场文书
2015年环保局工作总结
2015/05/22 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
如何用Python搭建gRPC服务
2021/06/30 Python
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript