微信小程序使用騰訊地圖SDK詳解及實現(xiàn)步驟

更新時間：2017年02月28日 16:25:36 作者：呂周坤

這篇文章主要介紹了微信小程序使用騰訊地圖SDK詳解及實現(xiàn)步驟的相關(guān)資料,需要的朋友可以參考下

微信小程序使用騰訊地圖SDK詳解及實現(xiàn)步驟

　近期在做一款彩票服務(wù)類項目中用到了騰訊地圖提供的小程序解決方案，拿來給大家分享一下！

　　使用起來非常簡單，就是一些功能還有待完善。

　　官方文檔：http://lbs.qq.com/qqmap_wx_jssdk/index.html

步驟：

申請開發(fā)者密鑰（key）：申請密匙
下載微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0
安全域名設(shè)置，需要在微信公眾平臺添加域名地址https://apis.map.qq.com
小程序示例

// 引入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 另外還有以下功能，就不一一演示了。

getCityList(options:Object)：獲取全國城市列表數(shù)據(jù)；
getDistrictByCityId(options:Object)：通過城市ID返回城市下的區(qū)縣；
reverseGeocoder(options:Object)：用于獲取輸入關(guān)鍵字的補完與提示，幫助用戶快速輸入
geocoder(options:Object)：提供由地址描述到所述位置坐標(biāo)的轉(zhuǎn)換，與逆地址解析reverseGeocoder()的過程正好相反。

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章: