微信小程序 使用腾讯地图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 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
微信小程序 slot踩坑的解决
Apr 01 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
js实现列表按字母排序
Aug 11 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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
Array of country list in PHP with Zend Framework
2011/10/17 PHP
php的curl封装类用法实例
2014/11/07 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
jquery动态加载图片数据练习代码
2011/08/04 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
关于js datetime的那点事
2011/11/15 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
Python实现115网盘自动下载的方法
2014/09/30 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
Python Django view 两种return的实现方式
2020/03/16 Python
基于python实现地址和经纬度转换
2020/05/19 Python
Python虚拟环境venv用法详解
2020/05/25 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
商务英语应届生自我鉴定
2013/12/08 职场文书
顶撞老师检讨书
2014/02/07 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
Mysql如何查看是否使用到索引
2022/12/24 MySQL