小程序地图Map反思

ghnor 发布于2019-08-22 16:40 / 2572人阅读

摘要：我的内心最后，一边等待腾讯官方修一边找最优方案比如把的背景透明，在下偏移会比较不明显适用于数字展示小程序挺多的，很意外，但是还需要不断优化，还是很不错的

写在开头：
最近在做关于地图的小程序，然后就发现了各种问题，然后就想写一篇文章作为记录
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地图程序源码管理工作反思小程序小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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