微信小程序地圖如何顯示附近廁所WC步行路線

前言

第一次使用騰訊位置服務也算是挺早的，當時是在web端使用。后來，個人慢慢接觸到小程序，有一次的需求是能夠展示附近的各類店鋪，方便自己快速定位周圍有什么好吃好逛的地方。再后來每次到一個地方旅游，我們必不可少的一個需求就是需要上WC，當時就在想如何通過一個地圖來實現快速定位周邊WC的位置以及步行路線，現在好了，有騰訊位置服務功能可以直接在小程序上面直接使用，借助巨人的力量可以好好發揮去實現需求功能了。

因此，寫這篇文章，也是希望能夠總結對接騰訊位置服務功能步驟和知識點，方便開發同行快速上手和使用。

申請Key

創建用於自己某一業務或某一場景的Key密鑰，擁有這把鑰匙，就可以開始地圖功能體驗啦！直接微信掃碼授權登錄即可，騰訊列表功能使用微信掃碼登錄方便好多，省去了古老需要密碼登錄的好方式。

后台點擊菜單：key與配額 ->key管理，具體開發者密鑰申請信息填寫如下

設置域名

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

引入js

點擊官網的開發文檔中的微信小程序JavaScript SDK進行下載

// 引入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: 'xxxx-xxxx，你自己申請到的key'
        });
    },
    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: 'xxxx-xxxx，你自己申請到的key'
        });
    },
    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代碼

// 引入SDK核心類，js文件根據自己業務，位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
    data:{
      longitude:'113.390451',
      latitude:'23.048914',
      markers:[{label:{content:'廣州番禺大學城'},longitude:'113.390451',latitude:'23.048914'}]
    },
    onLoad: function () {
        // 實例化API核心類
        qqmapsdk = new QQMapWX({
            key: 'xxxx-xxxx，你自己申請到的key'
        });
    },
    onShow: function () {
      // 調用接口
      qqmapsdk.search({
          keyword: 'GoGo廁所',
          success: function (res) {
              //console.log(res);
          },
          fail: function (res) {
              //console.log(res);
          },
          complete: function (res) {
              console.log(res);
          }
      });
  },
  //觸發表單提交事件，調用接口
  formSubmit(e) {
    //起點坐標：23.048914,113.390451 
    //終點坐標：23.061793,113.392056
 
    //23.061793,113.392056
    //23.063073,113.391762
 
    var _this = this;
    //調用距離計算接口
    qqmapsdk.direction({
      mode: 'driving',//可選值：'driving'（駕車）、'walking'（步行）、'bicycling'（騎行），不填默認：'driving',可不填
      //from參數不填默認當前地址
      from: e.detail.value.start,
      to: e.detail.value.dest, 
      success: function (res) {
        console.log(res);
        var ret = res;
        var coors = ret.result.routes[0].polyline, pl = [];
        //坐標解壓（返回的點串坐標，通過前向差分進行壓縮）
        var kr = 1000000;
        for (var i = 2; i < coors.length; i++) {
          coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
        }
        //將解壓后的坐標放入點串數組pl中
        for (var i = 0; i < coors.length; i += 2) {
          pl.push({ latitude: coors[i], longitude: coors[i + 1] })
        }
        console.log(pl)
        //設置polyline屬性，將路線顯示出來,將解壓坐標第一個數據作為起點
        _this.setData({
          latitude:pl[0].latitude,
          longitude:pl[0].longitude,
          polyline: [{
            points: pl,
            color: '#FF0000DD',
            width: 4
          }]
        })
      },
      fail: function (error) {
        console.log(error);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  }
})

view代碼

<!--地圖容器-->
<map
id="myMap"
style="width: 100%; height: 300px;"
longitude="{{longitude}}" latitude="{{latitude}}"
scale='16'
polyline="{{polyline}}"
show-location
>
</map>
<form bindsubmit="formSubmit">
    <!--輸入起點和目的地經緯度坐標，格式為string格式-->
    <!--起點輸入框,同終點，不填默認當前位置-->
    <label>起點坐標：<input style="border:1px solid #000;" name="start"></input></label>
    <!--終點輸入框,例：39.984060,116.307520-->
    <label>終點坐標：<input style="border:1px solid #000;" name="dest"></input></label> 
    <!--提交表單數據-->
    <button form-type="submit">路線規划</button>
</form>

開啟個性化騰訊地圖

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

有些插件還要另外申請appid

原文作者：小5聊

原文鏈接：https://blog.csdn.net/lmy_520/article/details/112677899