摘要：我的內(nèi)心最后，一邊等待騰訊官方修一邊找最優(yōu)方案比如把的背景透明，在下偏移會(huì)比較不明顯適用于數(shù)字展示小程序挺多的，很意外，但是還需要不斷優(yōu)化，還是很不錯(cuò)的

寫(xiě)在開(kāi)頭：
最近在做關(guān)于地圖的小程序，然后就發(fā)現(xiàn)了各種問(wèn)題，然后就想寫(xiě)一篇文章作為記錄
PS：不定時(shí)持續(xù)更新

產(chǎn)品的需求是想要在地圖同時(shí)展示marker和一些信息

剛開(kāi)始覺(jué)得這個(gè)功能用markers 和 markers的屬性label 可以很容易實(shí)現(xiàn)

代碼如下：

initMarkerData(){
    let _this = this;
    let markerList = [];
    for (let i in _this.data.listData){
        let poiInfo = _this.data.listData[i];

        let singleMarker = {};
        let labelInfo = {};
        singleMarker["iconPath"] = "../../image/oilCallout.png";
        singleMarker["width"] = 40;
        singleMarker["height"] = 40;
        singleMarker["id"] = poiInfo.id;
        singleMarker["latitude"] = poiInfo.placeLatitude;
        singleMarker["longitude"] = poiInfo.placeLongitude;
        singleMarker["label"] = {};
        singleMarker["label"]["content"] = poiInfo.placeName + "
" + poiInfo.placeAddress;
        singleMarker["label"]["x"] = 20;
        singleMarker["label"]["y"] = -40;
        singleMarker["label"]["padding"] = 3;
        singleMarker["label"]["bgColor"] = "#ffffff";
        singleMarker["label"]["borderRadius"] = 5;
        markerList.push(singleMarker);
        
    }
    console.log(markerList);
    _this.setData({
        markers : markerList
    })
    return markerList;
},

onLoad() {//頁(yè)面加載時(shí)
    let _this = this;
    //初次進(jìn)入頁(yè)面獲取到我的位置,方便設(shè)置map
    wx.getLocation({//獲取當(dāng)前的地理位置、速度
        type: "wgs84", //返回可以用于wx.openLocation的經(jīng)緯度
        success: res => {
            _this.setData({
                markers: _this.initMarkerData(),//請(qǐng)求后端獲取所有markers
                longitude: res.longitude,
                latitude: res.latitude,
                scale: 8 //首次地圖比例改這里
            })
        }
    });
},

然后，問(wèn)題就出現(xiàn)了，在微信開(kāi)發(fā)者工具里展示是沒(méi)有OK的，但是！?。≡谡鏅C(jī)預(yù)覽的時(shí)候，我發(fā)現(xiàn)label會(huì)有偶發(fā)性的不展示，而且不展示的情況也沒(méi)有任何章法。具體分為以下幾類(lèi)：

a: 只展示一部分
b: 只展示label背景，不展示文字
c: 所有的都不展示
d: 所有的都只展示背景不展示文字

我的內(nèi)心：fn9#bei*jvjc%vjsvdj#dbcjscbv&sbcd%%
快下班了，發(fā)現(xiàn)廢話(huà)說(shuō)多了?？傊褪俏野l(fā)現(xiàn)：

Marker的label有兼容性問(wèn)題，目前我自己驗(yàn)證過(guò)的機(jī)型：（后續(xù)會(huì)根據(jù)項(xiàng)目進(jìn)度做補(bǔ)充）

小米5: 沒(méi)問(wèn)題，數(shù)據(jù)加載和樣式都OK
vivoX9 Plus/ 三星5: 存在有上述問(wèn)題
iPhone7: label都加載出來(lái)了，但是有樣式問(wèn)題，Marker和label偏移了，沒(méi)對(duì)齊

作為一個(gè)孜孜不倦的程序員，我在小程序的社區(qū)提問(wèn)了，在提問(wèn)的時(shí)候發(fā)現(xiàn)，我不是一個(gè)人！

查看Marker的展示問(wèn)題進(jìn)度點(diǎn)這里
查看label的展示問(wèn)題進(jìn)度點(diǎn)這里

然后就查小程序API看下有沒(méi)有什么可替代的方案于是就發(fā)現(xiàn)了marker還有一個(gè)callout屬性可以做替代，但是??！callout屬性只是多帶帶的氣泡展示，里面只能展示文字，不能展示圖片，還不能設(shè)置背景圖。
咨詢(xún)了下產(chǎn)品的意見(jiàn)，產(chǎn)品表示一定想要Marker和文字信息同時(shí)展示。

我的內(nèi)心：fn9#bei*jvjc%vjsvdj#dbcjscbv&sbcd%%

最后，一邊等待騰訊官方修bug一邊找最優(yōu)方案

比如：把label的背景透明，在IOS下偏移會(huì)比較不明顯（適用于數(shù)字展示）

小程序API挺多的，很意外，但是還需要不斷優(yōu)化，還是很不錯(cuò)的～