小程序地圖Map反思

ghnor 發布于2019-08-22 16:40 / 2666人閱讀

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

寫在開頭：
最近在做關于地圖的小程序，然后就發現了各種問題，然后就想寫一篇文章作為記錄
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 + "
" + 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挺多的，很意外，但是還需要不斷優化，還是很不錯的～

云服務器 GPU云服務器百度地圖map_marker java地圖程序源碼管理工作反思小程序小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/94557.html

為了監視快遞小哥，我做了一個小程序！

摘要：因為我們需要確定是地圖上任意一個點上某個范圍內的送餐員電話所以我們需要一某個點為中心畫圓當然高德地圖給我們提供了這樣的一個接口。我感覺我可以在電腦上查看快遞小哥離我有多遠了! 應用演示地址: http://geomap.wilddogapp.com/ 源碼下載: http://git.oschina.net/chengxinxin/wildGeo 下載到本地解壓后即可運行。由于流量...

BLUE 2019-08-29 11:14 評論0 收藏0
為了監視快遞小哥，我做了一個小程序！

摘要：因為我們需要確定是地圖上任意一個點上某個范圍內的送餐員電話所以我們需要一某個點為中心畫圓當然高德地圖給我們提供了這樣的一個接口。我感覺我可以在電腦上查看快遞小哥離我有多遠了! 應用演示地址: http://geomap.wilddogapp.com/ 源碼下載: http://git.oschina.net/chengxinxin/wildGeo 下載到本地解壓后即可運行。由于流量...

CompileYouth 2019-08-20 10:48 評論0 收藏0
為了監視快遞小哥，我做了一個小程序！

摘要：因為我們需要確定是地圖上任意一個點上某個范圍內的送餐員電話所以我們需要一某個點為中心畫圓當然高德地圖給我們提供了這樣的一個接口。我感覺我可以在電腦上查看快遞小哥離我有多遠了! 應用演示地址: http://geomap.wilddogapp.com/ 源碼下載: http://git.oschina.net/chengxinxin/wildGeo 下載到本地解壓后即可運行。由于流量...

Worktile 2019-06-26 17:04 評論0 收藏0