微信小程序 使用腾讯地图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 相关文章推荐
Extjs4 类的定义和扩展实例
Jun 28 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 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连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
php实现的双色球算法示例
2017/06/20 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
xmlHTTP实例
2006/10/24 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
python实现求最长回文子串长度
2018/01/22 Python
python实现烟花小程序
2019/01/30 Python
Python骚操作之动态定义函数
2019/03/26 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
入党积极分子思想汇报范文
2014/01/05 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
纪检监察建议书
2014/05/19 职场文书
教师节老师寄语
2015/05/28 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
音乐剧猫观后感
2015/06/04 职场文书
四风之害观后感
2015/06/09 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers