上期，我們?cè)凇丁蛤v訊視頻」小程序插件：免費(fèi)又好用，要為開(kāi)發(fā)者省下推廣費(fèi)！》一文中介紹了「騰訊視頻」小程序插件的意義、使用場(chǎng)景以及使用方法。

今天我們會(huì)與大家分享一款同樣優(yōu)秀的小程序插件——「騰訊地圖」插件，從使用場(chǎng)景到使用方法，都將作出詳細(xì)的介紹。

「騰訊地圖」插件能做什么？

顧名思義，「騰訊地圖」插件由騰訊地圖官方出品，旨在為開(kāi)發(fā)者提供簡(jiǎn)單的路線(xiàn)多方案規(guī)劃服務(wù)，可在插件中顯示指定位置間的路線(xiàn)方案，支持駕車(chē)、公交、步行的路線(xiàn)規(guī)劃能力及 ETA 等基礎(chǔ)路線(xiàn)信息。

如果你想像「騰訊地圖+」小程序一樣實(shí)現(xiàn)地圖的基礎(chǔ)功能，使用「騰訊地圖」插件是你的最佳選擇。

 

「騰訊地圖+」小程序截圖

作為首批推出的小程序插件，「騰訊地圖」插件經(jīng)過(guò)了多個(gè)版本的優(yōu)化，從最初的顯示目標(biāo)位置信息以及提供附近地圖功能，到現(xiàn)在已經(jīng)支持路線(xiàn)規(guī)劃等能力，地圖的功能幾乎已經(jīng)全部配備齊全。

「騰訊地圖」插件的使用場(chǎng)景

場(chǎng)景一：收到小程序的婚禮請(qǐng)柬，但是請(qǐng)柬上的地址找不到？怎么辦？

 

如果你開(kāi)發(fā)的是請(qǐng)柬邀請(qǐng)類(lèi)的小程序，就會(huì)遇到上述場(chǎng)景。在傳統(tǒng)開(kāi)發(fā)模式中，引入完整的地圖選點(diǎn)、路線(xiàn)規(guī)劃組件，開(kāi)發(fā)成本非常高，更多開(kāi)發(fā)者選擇讓用戶(hù)直接輸入文字地址進(jìn)行展示，以此作為降低開(kāi)發(fā)成本的妥協(xié)方案。這樣的設(shè)計(jì)不可點(diǎn)擊，更沒(méi)有路線(xiàn)規(guī)劃的能力，用戶(hù)還需手動(dòng)輸入去查詢(xún)地址和交通路線(xiàn)。

 

傳統(tǒng)請(qǐng)柬 不可交互

 

但如果開(kāi)發(fā)者選擇使用騰訊地圖提供的同名小程序插件，開(kāi)發(fā)成本將大幅降低，用戶(hù)體驗(yàn)也能直線(xiàn)上升。我們?cè)谶@里以婚慶請(qǐng)柬小程序?yàn)槔M(jìn)行說(shuō)明：

用戶(hù)在編輯請(qǐng)柬小程序的過(guò)程中，提前設(shè)置好婚禮舉辦地點(diǎn)；

 

當(dāng)婚禮賓客收到請(qǐng)柬，點(diǎn)擊地點(diǎn)，「騰訊地圖」插件就能根據(jù)其賓客當(dāng)前位置和目的地坐標(biāo)，自動(dòng)生成精準(zhǔn)的導(dǎo)航路線(xiàn)。

 

 

一鍵導(dǎo)航 簡(jiǎn)潔明了

場(chǎng)景二：會(huì)議服務(wù)小幫手——提前了解參會(huì)路線(xiàn)

與會(huì)者應(yīng)該如何從高鐵站、機(jī)場(chǎng)、火車(chē)站前往會(huì)議地點(diǎn)，一直都是各類(lèi)會(huì)議邀請(qǐng)的必備內(nèi)容。但長(zhǎng)期以來(lái)，此類(lèi)信息都習(xí)慣以純文字形式進(jìn)行發(fā)布，體驗(yàn)上存在不便理解、記憶難的問(wèn)題。

如果小程序能夠使用「騰訊地圖」插件，這類(lèi)場(chǎng)景的體驗(yàn)將發(fā)生質(zhì)的改變：

 

會(huì)議組織方在小程序中提前設(shè)置多組起終點(diǎn)（如：機(jī)場(chǎng) - 會(huì)議中心、高鐵站 - 會(huì)議中心），與會(huì)者收到會(huì)議邀請(qǐng)后點(diǎn)擊指定線(xiàn)路，就能在地圖插件中查看到精確的參會(huì)路線(xiàn)。

 

 

這樣是不是比枯燥的文字多了幾分智能呢？

如何接入「騰訊地圖」插件？

「騰訊地圖」的功能強(qiáng)大，使用起來(lái)卻十分簡(jiǎn)單：

1.申請(qǐng)使用插件。在「小程序管理后臺(tái) - 設(shè)置 - 第三方服務(wù) - 插件管理」中查找插件名稱(chēng)「騰訊地圖」（目前最新版本：1.0.6，appid：wx5bc2ac602a747594），并申請(qǐng)使用。

 

2.引入插件代碼后修改配置文件 JSON：

{  "usingComponents": {    "map-route": "plugin://myPlugin/mapRoute"  }}

3.使用地圖插件。在相應(yīng)的 WXML 文件中添加以下標(biāo)簽：

<map-route route-info="{{routeInfo}}"></map-route>

4.最后，按需求在 JS 文件中處理傳入插件數(shù)據(jù)，數(shù)據(jù)包括：起點(diǎn)，終點(diǎn)經(jīng)緯度及名稱(chēng)，路線(xiàn)算路方式，封裝在 routeInfo 結(jié)構(gòu)中：

let plugin = requirePlugin("myPlugin")let routeInfo = {    startLat: 39.90469,    // 起點(diǎn)緯度 選填    startLng: 116.40717,    // 起點(diǎn)經(jīng)度 選填    startName: "我的位置",   // 起點(diǎn)名稱(chēng) 選填    endLat: 39.94055,    // 終點(diǎn)緯度必傳    endLng :116.43207,  // 終點(diǎn)經(jīng)度 必傳    endName:"來(lái)福士購(gòu)物中心",  // 終點(diǎn)名稱(chēng) 必傳    mode:"car"  //算路方式 選填} Page({  data: {    routeInfo: routeInfo  } })

 

參數(shù)說(shuō)明：

起點(diǎn)：不填寫(xiě)或 startName="我的位置" 或 startName="當(dāng)前位置" 或 startName="currentLocation" 則插件會(huì)獲取當(dāng)前的定位位置作為起點(diǎn)位置發(fā)起算路，若正確填寫(xiě)起點(diǎn)信息，則以傳入的起點(diǎn)信息發(fā)起算路。

 

終點(diǎn)：必傳參數(shù)，不正確傳入則不會(huì)發(fā)起算路或者算路失敗。

 

 

算路方式：

mode，目前支持三種算路方式，分別是：駕車(chē)（car），公交（bus），步行（walk）；不傳則默認(rèn)發(fā)起駕車(chē)算路。

 

 

 

注意：數(shù)據(jù)要在 data 中初始化，不要在 onLoad 中直接 setData，因?yàn)?nbsp;onLoad 中直接 setData，properties 的 routeInfo 的 observer: function (newVal, oldVal)，newVal接收不到參數(shù)，導(dǎo)致參數(shù)報(bào)錯(cuò)，之后可以通過(guò) bind 其他事件 setData 更新 routeInfo 達(dá)到變更起終點(diǎn)參數(shù)的效果。

「騰訊地圖」插件使用效果圖

 

如果你想了解更多「騰訊地圖」插件詳情，歡迎訪(fǎng)問(wèn)開(kāi)發(fā)者社區(qū)插件版塊相應(yīng)頁(yè)面（建議電腦訪(fǎng)問(wèn)）：