您现在的位置: 微信小程序 > 微信小程序开发 > 教程 >

小程序之地图Map反思

来源:微信小程序 编辑:Yiyongtong.com 发布时间:2018-05-09 14:48热度:

写在开头:
最近在做关于地图的小程序,然后就发现了各种问题,然后就想写一篇文章作为记录
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偏移了,没对齐

作为一个孜孜不倦的程序员,我在小程序的社区提问了,在提问的时候发现,我不是一个人!

 

然后就查小程序API看下有没有什么可替代的方案于是就发现了marker还有一个callout属性可以做替代,但是!!callout属性只是单独的气泡展示,里面只能展示文字,不能展示图片,还不能设置背景图。
咨询了下产品的意见,产品表示一定想要Marker和文字信息同时展示。

我的内心:fn9#bei*jvjc%vjsvdj#dbcjscbv&sbcd%%

最后,一边等待腾讯官方修bug一边找最优方案

比如:把label的背景透明,在IOS下偏移会比较不明显(适用于数字展示)

小程序API挺多的,很意外,但是还需要不断优化,还是很不错的~