【小5聊】騰訊位置服務之小程序簡單使用以及顯示附近WC步行路線

【一起來體驗騰訊位置服務功能】

點擊以下鏈接報名體驗吧

https://lbs.qq.com?lbs_invite=9QNIFL9

【申請Key】

地址：點擊此連接登錄註冊申請Key

【設置域名】

小程序管理後臺 -> 開發 -> 開發管理 -> 開發設置 -> “服務器域名” 中設置request合法域名，添加https://apis.map.qq.com

【引入js】

下載地址：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

JavaScriptSDK v1.2

// 引入SDK核心類，js文件根據自己業務，位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
    data:{
      longitude:'113.390451',
      latitude:'23.048914'
    },
    onLoad: function () {
        // 實例化API核心類
        qqmapsdk = new QQMapWX({
            key: 'XSJBZ-FTRKR-E77WZ-WLE4L-XBGW7-QIFRZ'
        });
    },
    onShow: function () {
      // 調用接口
      qqmapsdk.search({
          keyword: '廣州大學城',
          success: function (res) {
              //console.log(res);
          },
          fail: function (res) {
              //console.log(res);
          },
          complete: function (res) {
              console.log(res);
          }
      });
  }
})

【使用地圖】

使用地圖map組件，具體參數可查看官方文檔

溫馨提示：小程序界面默認頂部是白色背景固定高度的標題欄，如果需要隱藏頂部標題欄的方法，那麼需要在app.json配置裏的window里加"navigationStyle": "custom",

• 默認效果圖 

地圖組件參數什麼也沒設置的情況下，默認如下效果圖 

• view代碼

<view class='view'>
  <map longitude="{
  
  {longitude}}" latitude="{
  
  {latitude}}"></map>
</view>

【顯示標註】

給默認座標加個標註，標註可以是數組，座標點數組值，這樣在地圖的效果就是多個標註點

marker：標記點用於在地圖上顯示標記的位置

關鍵代碼：markers:[{longitude:'113.390451',latitude:'23.048914'}]
多個標註：markers:[{longitude:'113.390451',latitude:'23.048914'},{longitude:'113.390451',latitude:'23.048914'}]

• bindmarkertap：點擊標記點時觸發
• bindlabeltap：點擊標記點label時觸發
• bindcallouttap：點擊標記點對應的氣泡時觸發

• 默認標註效果

• js代碼

// 引入SDK核心類，js文件根據自己業務，位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
    data:{
      longitude:'113.390451',
      latitude:'23.048914',
      markers:[{longitude:'113.390451',latitude:'23.048914'}]
    },
    onLoad: function () {
        // 實例化API核心類
        qqmapsdk = new QQMapWX({
            key: 'XSJBZ-FTRKR-E77WZ-WLE4L-XBGW7-QIFRZ'
        });
    },
    onShow: function () {
      // 調用接口
      qqmapsdk.search({
          keyword: '廣州大學城',
          success: function (res) {
              //console.log(res);
          },
          fail: function (res) {
              //console.log(res);
          },
          complete: function (res) {
              console.log(res);
          }
      });
  }
})

• view代碼

<view class='view'>
  <map longitude="{
  
  {longitude}}" latitude="{
  
  {latitude}}" markers="{
  
  {markers}}"></map>
</view>

【標註顯示文本】

 

• js代碼效果

• js代碼

//關鍵代碼
//markers屬性下還有屬性成員-{label:{content:'廣州番禺大學城'}
data:{
    markers:[{label:{content:'廣州番禺大學城'},longitude:'113.390451',latitude:'23.048914'}]
},

 

【WC路線規劃】

下面的還有做樣式設置，比如：箭頭、和線路顏色，以及起點和終點的文本顯示等等，純屬默認參數

• 效果

• js代碼

 

• view代碼

 

【開啓個性化騰訊地圖】

微信掃碼綁定，微信會判斷當前小程序是否註冊騰訊位置服務，如果提示未註冊，那麼可以輸入已註冊的賬號，一般是手機號碼登錄，完成小程序和騰訊位置服務賬號的綁定。

有些插件還要另外申請appid

 

更多完善功能持續更新中...