⼩程序使⽤腾讯地图SDK详解及实现步骤⼩程序使⽤腾讯地图SDK详解及实现步骤
　近期在做⼀款服务类项⽬中⽤到了腾讯地图提供的⼩程序解决⽅案，拿来给⼤家分享⼀下！
  使⽤起来⾮常简单，就是⼀些功能还有待完善。
步骤：
1. 申请开发者密钥（key）：申请密匙
2. 下载⼩程序JavaScriptSDK，⼩程序JavaScriptSDK v1.0
3. 安全域名设置，需要在公众平台添加域名地址apis.map.qq
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) {
sdk    console.log(res);
  　},
  　complete: function(res) {
    console.log(res);
  　}
  })
　}
})
/
/ utils/util.js
/**
* 将距离格式化
* <1000m时取整，没有⼩数点
* >1000m时单位取km,⼀位⼩数点
*/
function formatDistance(num) {
　if (num < 1000) {
  Fixed(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">电话：{{l}}</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)
⽤于获取输⼊关键字的补完与提⽰，帮助⽤户快速输⼊。
⽰例：
// 调⽤接⼝
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()的过程正好相反。感谢阅读，希望能帮助到⼤家，谢谢⼤家对本站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。