您好,登錄后才能下訂單哦!
微信小程序 使用騰訊地圖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é)?!钡?br />
去購彩界面的實現(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 另外還有以下功能,就不一一演示了。
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。