微信小程序 使用騰訊地圖SDK詳解及實現步驟
近期在做一款彩票服務類項目中用到了騰訊地圖提供的小程序解決方案，拿來給大家分享一下！
使用起來非常簡單，就是一些功能還有待完善。
官方文檔：http://lbs.qq.com/qqmap_wx_jssdk/index.html
步驟：
// 引入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，比如“酒店”“餐飲”“娛樂”“學?！钡?br />
去購彩界面的實現：
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 另外還有以下功能，就不一一演示了。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
