微信小程序 使用腾讯地图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判断机器是否联网的2种方法
Aug 09 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
js中arguments对象的深入理解
May 14 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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高级OOP技术演示
2009/08/27 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
关于svn冲突的解决方法
2013/06/21 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
Python编码时应该注意的几个情况
2013/03/04 Python
Python实现的tab文件操作类分享
2014/11/20 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
铭立家具面试题
2012/12/06 面试题
银行实习自我鉴定
2013/10/12 职场文书
学生打架检讨书大全
2014/01/23 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
大学军训感言200字
2014/02/26 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
大学社团活动总结
2014/04/26 职场文书
计算机教师工作总结
2015/08/13 职场文书
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python