微信小程序 使用腾讯地图SDK详解及实现步骤

微信小程序 使用腾讯地图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);
   }
 });
})

结果效果图：

去*.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()的过程正好相反。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# 微信小程序  # 使用腾讯地图SDK详解  # 小程序  # 腾讯地图SDK  # 微信小程序+腾讯地图开发实现路径规划绘制  # 微信小程序把百度地图坐标转换成腾讯地图坐标过程详解  # 微信小程序 腾讯地图显示偏差问题解决  # 微信小程序 腾讯地图SDK 获取当前地址实现解析  # 微信小程序 接入腾讯地图的两种写法  # uniApp微信小程序使用腾讯地图定位功能及getLocation需要在app.json中声明per  # 关键词  # 腾讯  # 输入关键字  # 多点  # 你自己  # 希望能  # 给大家  # 谢谢大家  # 所述  # 点到  # 不一一  # 近期  # 文档  # keyword  # search  # success  # log  # console  # res  # onShow 

相关文章： 教程网站设计制作软件,怎么创建自己的一个网站？  天津个人网站制作公司,天津网约车驾驶员从业资格证官网？  广州建站公司哪家好？十大优质服务商推荐  如何快速搭建高效可靠的建站解决方案？  如何在Golang中引入测试模块_Golang测试包导入与使用实践  如何用搬瓦工VPS快速搭建个人网站？  北京企业网站设计制作公司,北京铁路集团官方网站？  如何解决VPS建站LNMP环境配置常见问题？  建站之星好吗？新手能否轻松上手建站？  如何在搬瓦工VPS快速搭建网站？  如何选择PHP开源工具快速搭建网站？  建站主机服务器选购指南：轻量应用与VPS配置解析  建站org新手必看：2024最新搭建流程与模板选择技巧  电影网站制作价格表,那些提供免费电影的网站，他们是怎么盈利的？  网站制作难吗安全吗,做一个网站需要多久时间？  如何在阿里云完成域名注册与建站？  常州自助建站工具推荐：低成本搭建与模板选择技巧  学校为何禁止电信移动建设网站？  公司网站设计制作厂家,怎么创建自己的一个网站？  网站制作费用多少钱,一个网站的运营，需要哪些费用？  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  杭州银行网站设计制作流程,杭州银行怎么开通认证方式？  广州网站建站公司选择指南：建站流程与SEO优化关键词解析  如何高效完成自助建站业务培训？  打鱼网站制作软件,波克捕鱼官方号怎么注册？  广平建站公司哪家专业可靠？如何选择？  C++如何编写函数模板？（泛型编程入门）  GML (Geography Markup Language)是什么，它如何用XML来表示地理空间信息？  定制建站流程步骤详解：一站式方案设计与开发指南  网站建设制作、微信公众号,公明人民医院怎么在网上预约？  建站之星体验版：智能建站系统+响应式设计，多端适配快速建站  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  如何零基础开发自助建站系统？完整教程解析  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  巅云智能建站系统：可视化拖拽+多端适配+免费模板一键生成  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程？  长春网站建设制作公司,长春的网络公司怎么样主要是能做网站的？  代刷网站制作软件,别人代刷火车票靠谱吗？  济南网站制作的价格,历城一职专官方网站？  合肥做个网站多少钱,合肥本地有没有比较靠谱的交友平台？  青岛网站建设如何选择本地服务器？  制作表格网站有哪些,线上表格怎么弄？  建站主机数据库如何配置才能提升网站性能？  宿州网站制作公司兴策,安徽省低保查询网站？  建站之星官网登录失败？如何快速解决？  如何通过虚拟主机快速搭建个人网站？  宝盒自助建站智能生成技巧：SEO优化与关键词设置指南  手机网站制作与建设方案,手机网站如何建设？  网站制作企业,网站的banner和导航栏是指什么？  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？