小程序地圖Map反思

寫在開頭：
最近在作關於地圖的小程序，而後就發現了各類問題，而後就想寫一篇文章做爲記錄
PS：不定時持續更新

關於Marker

產品的需求是想要在地圖同時展現marker和一些信息

剛開始以爲這個功能用markers 和 markers的屬性label 能夠很容易實現

代碼以下：

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 + '\n' + 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() {//頁面加載時
    let _this = this;
    //初次進入頁面獲取到個人位置,方便設置map
    wx.getLocation({//獲取當前的地理位置、速度
        type: 'wgs84', //返回能夠用於wx.openLocation的經緯度
        success: res => {
            _this.setData({
                markers: _this.initMarkerData(),//請求後端獲取全部markers
                longitude: res.longitude,
                latitude: res.latitude,
                scale: 8 //首次地圖比例改這裏
            })
        }
    });
},

而後，問題就出現了，在微信開發者工具裏展現是沒有OK的，可是！！！在真機預覽的時候，我發現label會有偶發性的不展現，並且不展現的狀況也沒有任何章法。具體分爲如下幾類：

a: 只展現一部分
b: 只展現label背景，不展現文字
c: 全部的都不展現
d: 全部的都只展現背景不展現文字

個人心裏：fn9#bei*jvjc%vjsvdj#dbcjscbv&sbcd%%
快下班了，發現廢話說多了。總之就是我發現：

Marker的label有兼容性問題，目前我本身驗證過的機型：（後續會根據項目進度作補充）

小米5: 沒問題，數據加載和樣式都OK
vivoX9 Plus/ 三星5: 存在有上述問題
iPhone7: label都加載出來了，可是有樣式問題，Marker和label偏移了，沒對齊

做爲一個孜孜不倦的程序員，我在小程序的社區提問了，在提問的時候發現，我不是一我的！

查看Marker的展現問題進度點這裏
查看label的展現問題進度點這裏

而後就查小程序API看下有沒有什麼可替代的方案因而就發現了marker還有一個callout屬性能夠作替代，可是！！callout屬性只是單獨的氣泡展現，裏面只能展現文字，不能展現圖片，還不能設置背景圖。
諮詢了下產品的意見，產品表示必定想要Marker和文字信息同時展現。

個人心裏：fn9#bei*jvjc%vjsvdj#dbcjscbv&sbcd%%

最後，一邊等待騰訊官方修bug一邊找最優方案

好比：把label的背景透明，在IOS下偏移會比較不明顯（適用於數字展現）

小程序API挺多的，很意外，可是還須要不斷優化，仍是很不錯的～