小程序地图Map反思

2024年4月8日 190次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞