小程序獲取規當前位置規劃路線及直接跳轉騰訊地圖+小程序進行導航


一.小程序使用內置開發者工具進行線路規劃


1.在微信公衆平臺登錄小程序,選擇設置->第三方服務->添加插件

如下圖所示

在這裏插入圖片描述

勾選即可添加,查看詳情有插件的基本詳情、開發文檔和相關問題等。
在這裏插入圖片描述

在這裏插入圖片描述

在這裏我們選擇騰訊位置服務路線規劃,裏面選擇較多,可以按需添加。

根據接入指引步步操作:

在這裏插入圖片描述

首先在app.json裏面添加這些配置,permission是爲了詢問獲取當前位置的,一定要添加!!因爲沒添加剛開始好多人獲取不到,顯示GPS信號弱,添加上詢問按鈕就可以了!後面的plugins是添加的插件,第一個是路線規劃,第二個是選擇當前位置(此項不再演示)

在這裏插入圖片描述

在點擊事件中添加:

在這裏插入圖片描述

其中key和referer需要去騰訊服務官網申請

如下圖操作即可

在這裏插入圖片描述

申請成功之後就是我隱藏掉的第一行是referer,第二行是key。把這些信息寫到你的代碼裏就可以了。

跳轉函數的使用,使用文檔就詳細說明,我不在贅述

使用文檔傳送門

我使用的導航方式是當前位置到結束地點,所以當前位置不需要傳入,只傳入結束位置就可以了。

至此,我們使用開發者工具調試一下

此時,我們會發現頁面有兩個頭部,這是開發者工具上的樣子
在這裏插入圖片描述

我們在真機調試一下,發現其實並沒有兩個頭部!樣式正確!

到這裏其實我們所需要的路線規劃功能就完成了。


二、直接跳轉到騰訊地圖+小程序


從上面的手機截圖中可以看出,其實我們只能查看路線,並不能實時導航。然而項目經理就要求導航功能,那我們再另尋他法。

需要在app.json中增加跳轉其他小程序的配置

在這裏插入圖片描述

打開方法如下:
在這裏插入圖片描述

代碼複製出來比較方便

let endPoint = JSON.stringify({ //終點
      'name': data.address,
      'location': {
        'lat': data.latitude,
        'lng': data.longitude
      }
    })
    wx.navigateToMiniProgram({
      appId: 'wx7643d5f831302ab0', //要打開的小程序 appId
      path: 'pages/multiScheme/multiScheme?endLoc=' + endPoint, //打開的頁面路徑,如果爲空則打開首頁
      fail: function () {
        wx.showToast({
          icon: 'none',
          title: '打開失敗,請重試'
        })
      }
    })

其中name爲地點名稱,其他的參數是當前座標經緯度,一定要嚴格按照這樣的參數規則不然騰訊地圖+是獲取不到你的目的地座標的。

下面的方法是微信的原生方法。

至於我是怎麼獲取到騰訊地圖+小程序的appId和導航path的方法

參考:複製任意微信小程序頁面路徑

我們打開開發者工具:

在這裏插入圖片描述

在開發者工具上是不會幫你跳轉到其他小程序的,所以我們真機調試:

請看騰訊地圖小程序會直接跳轉到導航頁面並且獲取到我的目的地的名稱和座標,並且右下角出現了導航字樣。功能完成!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章