微信小程序 使用騰訊地圖SDK詳解及實現(xiàn)步驟
近期在做一款彩票服務(wù)類項目中用到了騰訊地圖提供的小程序解決方案，拿來給大家分享一下！
使用起來非常簡單，就是一些功能還有待完善。
官方文檔：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 () { // 調(diào)用接口 qqmapsdk.search({ keyword: '彩票', success: function (res) { console.log(res); }, fail: function (res) { console.log(res); }, complete: function (res) { console.log(res); } });})結(jié)果效果圖：
去購彩.png
5.核心類
5.1 地點搜索search(options:Object)
通過關(guān)鍵詞keyword搜索周邊poi，比如“酒店”“餐飲”“娛樂”“學(xué)校”等
去購彩界面的實現(xiàn)：
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; // 騰訊地圖調(diào)用接口 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);//轉(zhuǎn)換一下距離的格式 } that.setData({resData: resData}); }, fail: function(res) { console.log(res); }, complete: function(res) { console.log(res); } }) }})// utils/util.js/*** 將距離格式化* <1000m時 取整,沒有小數(shù)點* >1000m時 單位取km,一位小數(shù)點 */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 關(guān)鍵詞輸入提示getSuggestion(options:Object)
用于獲取輸入關(guān)鍵字的補完與提示，幫助用戶快速輸入。
示例：
// 調(diào)用接口qqmapsdk.getSuggestion({ keyword: '技術(shù)', success: function(res) { console.log(res); }, fail: function(res) { console.log(res); }, complete: function(res) { console.log(res); }});5.3 距離計算calculateDistance(options:Object)
計算一個點到多點的步行、駕車距離。
示例：
// 調(diào)用接口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 另外還有以下功能，就不一一演示了。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
