小順序輿圖Map深思

2023年1月5日 215次阅读 来源: wenjing0456

寫在開首：
近來在做關於輿圖的小順序，然後就發明了種種題目，然後就想寫一篇文章作為紀錄
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挺多的，很不測，然則還需要不停優化，照樣很不錯的～

    原文作者：wenjing0456
    原文地址: https://segmentfault.com/a/1190000014549615
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞