微信小程序 使用腾讯地图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 HTML中的table
Apr 15 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 Javascript
详解TypeScript的基础类型
Feb 18 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
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
Python中__call__用法实例
2014/08/29 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
Python运算符重载详解及实例代码
2017/03/07 Python
python实现俄罗斯方块
2018/06/26 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
汉森批发:Hansen Wholesale
2018/05/24 全球购物
大学秋游活动方案
2014/02/11 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
公司合并协议书范本
2014/09/30 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
python垃圾回收机制原理分析
2022/04/13 Python