你(nǐ)一定用過小(xiǎo)程序來(lái)導航、打車(chē)、找共享充電(diàn)寶... 不過，可(kě)能遇到過這些(xiē)令人(rén)“捉急”的情況：
定位時(shí)，明(míng)明(míng)能夠拖動地圖上(shàng)的圖标，找到了自己想去的地方，卻無法直接确定位置，隻能搜索目的地；
叫車(chē)時(shí)，明(míng)明(míng)看到了司機就離你(nǐ)2公裏，但(dàn)卻不能直接顯示到達時(shí)間(jiān)；
找共享充電(diàn)寶時(shí)，明(míng)明(míng)就可(kě)以使用不同的logo區(qū)分開(kāi)櫃機是在餐廳、超市、還(hái)是電(diàn)影(yǐng)院，但(dàn)所有(yǒu)logo都一樣，得(de)一一點開(kāi)才能知道(dào)你(nǐ)到底在哪兒？
……
地圖的确能帶你(nǐ)“去”任何地方，但(dàn)是，路上(shàng)也可(kě)能會(huì)發生(shēng)很(hěn)多(duō)不定的狀況。
今天我們來(lái)聊一件“新事兒”，當一個(gè)小(xiǎo)程序能力不能滿足需求時(shí)，可(kě)以與另一個(gè)能力疊加在一起打“組合拳”。就像樂高(gāo)的拼搭一樣，新穎的創意，大(dà)開(kāi)的腦(nǎo)洞往往會(huì)帶來(lái)更出奇不意的效果。
本期《小(xiǎo)程序說·能力百科全書(shū)》的主角是：“地圖組件+同層渲染”能力組合，我們邀請(qǐng)到貨拉拉、貨車(chē)定位、街(jiē)電(diàn)等3款小(xiǎo)程序，看看他們是如何通(tōng)過巧妙地應用，讓自己的服務更炫酷，從而留住用戶的。
一、貨拉拉
給司機直接的信息，還(hái)能“找樂子”
在沒有(yǒu)接入「地圖組件」之前，貨拉拉的“遭遇”是這樣的。
作(zuò)為(wèi)一款貨運平台，地圖是産品的靈魂，而「貨拉拉」小(xiǎo)程序的地圖功能使用的卻是H5；所以，「貨拉拉」隻支持地址搜索，規劃路線這些(xiē)都無法支持，用戶體(tǐ)驗上(shàng)非常“割裂”
接入「地圖組件」，用戶體(tǐ)驗可(kě)以說是直線提升，“現在用戶可(kě)以直接在地圖上(shàng)選擇發單地址、規劃貨運路線，以及查看司機的實時(shí)位置等等”，「貨拉拉」小(xiǎo)程序用戶端研發負責人(rén)尹志(zhì)平告訴我們。
不過，用戶想要看到司機與用戶的實時(shí)距離、以及貨車(chē)達到後的等待時(shí)間(jiān)時(shí)，依然還(hái)需多(duō)次點擊才能看得(de)到。這時(shí)候，同層渲染能力則能快速解決這一“Bug”。
同層渲染相當于在地圖上(shàng)增加了一個(gè)浮層，底層是地圖，上(shàng)面可(kě)以添加許多(duō)功能和(hé)需要顯示的信息。比如，在司機的位置圖标上(shàng)增加氣泡效果，用來(lái)展示貨車(chē)的位置，而在此前，得(de)需要用戶點擊多(duō)次才能實現。現在，尹志(zhì)平終于體(tǐ)驗到“一眼望穿”的感覺了。
除了解決了根本的用戶體(tǐ)驗問題，尹志(zhì)平還(hái)發現，同層渲染的加入，給貨車(chē)司機們找了很(hěn)多(duō)樂子。
比如，當貨車(chē)到達用戶指定位置，在裝貨過程，會(huì)有(yǒu)一段免費的等待時(shí)間(jiān)，超時(shí)才會(huì)收費。有(yǒu)了同層渲染，在地圖上(shàng)就可(kě)以實現更多(duō)好玩有(yǒu)趣的動态效果。在免費等待期間(jiān)，氣泡中的時(shí)間(jiān)采用了倒計(jì)時(shí)的效果；超時(shí)之後，則會(huì)換成另一種顔色，從視(shì)覺上(shàng)給用戶造成緊張感。
和(hé)高(gāo)德地圖用林志(zhì)玲的聲音(yīn)和(hé)郭德綱的相聲段子來(lái)增加聽(tīng)覺上(shàng)的趣味性一樣，貨拉拉小(xiǎo)程序則是用兩個(gè)能力組合達到了視(shì)覺享受。
二、貨車(chē)定位
跟着喬布斯做(zuò)一款極簡的定位神器(qì)
喬布斯曾說過，“簡潔就是美。”
但(dàn)對于貨車(chē)定位小(xiǎo)程序來(lái)說，簡潔有(yǒu)了，美卻沒了。
作(zuò)為(wèi)一個(gè)幫助用戶定位貨車(chē)和(hé)追蹤貨物的小(xiǎo)程序，意味着貨車(chē)定位需要配備足夠的功能。比如定位功能，可(kě)以查看車(chē)輛(liàng)的實時(shí)位置；軌迹功能，在地圖上(shàng)顯示車(chē)輛(liàng)行(xíng)車(chē)路線；提醒功能，推送車(chē)輛(liàng)到達時(shí)間(jiān)。
而在「地圖組件」支持同層渲染之前，這些(xiē)功能并不能同時(shí)覆蓋在地圖之上(shàng)。如果同時(shí)放置，整個(gè)頁面會(huì)淩亂不堪。如果硬要“簡潔”的話(huà)，就意味着功能不完善了。
“現在，同層渲染很(hěn)好地解決了這些(xiē)問題，這些(xiē)功能可(kě)以與地圖處于同一層級，也就不用擔心不好布局的問題了。” 「貨車(chē)定位」小(xiǎo)程序産品經理(lǐ)Vivian說。
除此，還(hái)可(kě)以在地圖上(shàng)放置更多(duō)的功能與好玩的效果。比如，把輸入框用氣泡的形式直接放置在地圖上(shàng)，方便用戶操作(zuò)。好玩的是，司機們可(kě)以任意增加氣泡，标記自己常去的地址，下次使用直接調出即可(kě)，方便又快捷。
值得(de)注意的是，同層渲染還(hái)大(dà)大(dà)提高(gāo)的操作(zuò)效率，沒有(yǒu)特殊需要的用戶和(hé)司機可(kě)以直接使用地圖享受服務，有(yǒu)其它需要的用戶和(hé)司機，可(kě)以在浮層上(shàng)任意選擇。一頁直達，各取所需。
三、街(jiē)電(diàn)
如果說，貨拉拉與貨車(chē)定位隻是“停留”在視(shì)覺體(tǐ)驗與功能優化上(shàng)，那(nà)對于街(jiē)電(diàn)小(xiǎo)程序來(lái)說，同層渲染帶來(lái)的改變，則是開(kāi)發者更在意的轉化與變現。
乍一看，地圖組件也好、同層渲染也好，與轉化變現并沒有(yǒu)什麽關系，但(dàn)在定位導航的場(chǎng)景中，則可(kě)以完美實現。
在「地圖組件」的使用上(shàng)，街(jiē)電(diàn)主要是用來(lái)标記用戶附近的充電(diàn)寶櫃機。用戶可(kě)以通(tōng)過地圖直觀地了解周邊有(yǒu)哪些(xiē)商戶可(kě)以使用街(jiē)電(diàn)共享充電(diàn)寶，并查看各櫃機對應的可(kě)借、還(hái)狀态，此外，還(hái)可(kě)以喚起導航前往目的地。
“尤其是在支持同層渲染之後，「地圖組件」的能力就更強大(dà)了，不但(dàn)降低(dī)了我們的開(kāi)發難度，還(hái)可(kě)以在地圖上(shàng)疊加更多(duō)好玩的動畫(huà)效果”，「街(jiē)電(diàn)」小(xiǎo)程序負責人(rén)小(xiǎo)富告訴我們，“在此之前，連GIF都不支持，幾乎無法在地圖上(shàng)使用動畫(huà)。”
直白點說就是，在櫃機圖标的展示上(shàng)，效果更好看也更好玩了。商家(jiā)不但(dàn)可(kě)以更換logo樣式，點擊氣泡圖标，還(hái)展示商戶名稱。
這樣一來(lái)，不同類型的商戶、不同狀态的櫃機就能使用不同的logo，用戶在選擇上(shàng)更直觀。節假日時(shí)，也可(kě)以換成主題logo，或根據商戶進行(xíng)定制(zhì)。比如，在聚美301周年慶的活動上(shàng)，街(jiē)電(diàn)就把所有(yǒu)櫃機的圖标換成了該活動
的主題logo，以此達到宣傳效果。對于街(jiē)電(diàn)來(lái)說，logo的更換也能成為(wèi)一種廣而告之的載體(tǐ)。 
此外，街(jiē)電(diàn)聯合附近商家(jiā)推出專屬優惠活動，商家(jiā)logo可(kě)被特别标記出來(lái)，同時(shí)，用戶點擊商家(jiā)圖标後的氣泡，還(hái)會(huì)顯示“優惠券”。這個(gè)舉措可(kě)謂是一箭三雕：幫商家(jiā)引了流、街(jiē)電(diàn)順便拉新轉化，而用戶說不定就能抽一張5折優惠卡，在給手機充電(diàn)之際，去吃(chī)一頓可(kě)口的大(dà)餐。
四、給開(kāi)發者的一些(xiē)建議
1.「地圖組件」本身無太大(dà)問題，主要是它與之對應的覆蓋組件有(yǒu)太多(duō)兼容性問題，在同層渲染之後可(kě)以大(dà)幅度減少(shǎo)這類問題。但(dàn)需要注意的是，同層渲染的基礎庫版本比較高(gāo)，強行(xíng)升基礎庫會(huì)造成較多(duō)用戶不升級微信就使用不了小(xiǎo)程序；
2.「地圖組件」的使用上(shàng)， 在自定義組件下，使用wx.createMapContext方法去創建地圖實例，要記得(de)給第二個(gè)參數(shù)this傳值，不然方法會(huì)無效，另外，要理(lǐ)解「地圖組件」是原生(shēng)組件，setData完後并不代表map已經做(zuò)完了相應的操作(zuò)；
3. 在做(zuò)服務端動态下發地圖圖标的功能時(shí)，地圖圖标是隻支持将圖标打包到小(xiǎo)程序包內(nèi)的，所以就無法實現動态與個(gè)性化配置。但(dàn)是，可(kě)以采用服務端下發圖片地址，然後小(xiǎo)程序先将圖片下載到本地的辦法，來(lái)實現動态配置的效果。