微信小程式實作使用騰訊地圖SDK步驟詳細介紹

這篇文章微信小程式實現使用騰訊地圖SDK步驟詳細介紹的相關資料,需要的朋友可以參考下

微信小程式使用騰訊地圖SDK詳解及實現步驟

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

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

　　官方文件：lbs.qq.com/qqmap_wx_jssdk/index.html

步驟：

1. #申請開發者金鑰（key）：申請密匙

2. 下載微信小程式JavascriptSDK，微信小程式JavascriptSDK v1.0

3. #安全網域設定，需要在微信公眾平台上新增網域位址apis.map.qq.com
   

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) {
　　　　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) + &#39;m&#39;;
　} else if (num > 1000) {
　　return (num / 1000).toFixed(1) + &#39;km&#39;;
　}
}

5.1.2 buy.wxml 主要樣式採用weui

<view class="page">
<view wx:for="{{resData}}" wx:key="shop" class="pagebd">
 <view bindtap="navTo" data-item="{{item}}">
  <view class="weui-panel">
   <view class="weui-panelbd">
    <view class="weui-media-box weui-media-box_text">
     <view class="weui-media-boxtitle weui-media-boxtitle_in-text">{{item.title}}</view>
     <view class="weui-media-boxdesc">{{item.address}}</view>
     <view class="weui-media-boxinfo">
      <view class="weui-media-boxinfometa">电话：{{item.tel}}</view>
      <view class="weui-media-boxinfometa weui-media-boxinfometa_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 另外還有以下功能，就不一一示範了。

1. getCityList(options:Object)：取得全國城市清單資料；

2. ##getDistrictByCityId(options:Object)：透過城市ID返回城市下的區縣；

3. reverseGeocoder(options:Object)：用於取得輸入關鍵字的補完與提示，幫助使用者快速輸入

4. geocoder(options:Object)：提供由位址描述到所述位置座標的轉換，與逆位址解析reverseGeocoder()的過程正好相反。

#

以上是微信小程式實作使用騰訊地圖SDK步驟詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！