收藏
回答

map组件markers丢失的问题


前置条件:markers中设置了callout

重现场景:地图上有A,B,C,D等多个marker,将视野放大到只有A(scale18级),之后将地图缩放还原,在scale18级状态以外的B.C.D等marker就消失不见了。需要再放大缩放地图一系列操作偶尔会还原显示

callout配置:

const calloutOptions = {

// content: 'abcdf',

borderRadius: 3,

bgColor: '#252525',

color: '#ffffff',

display: 'ALWAYS',

fontSize: 10,

padding: 4,

// boxShadow: '1px 1px 1px #000000',

}

另外boxShadow真机无效,ios11


------------------- 代码 -----------------------


第一步,缩小地图,视野放大到整个杭州市,可以看到有很多门店

然后对着15555555或者其他某个点一直放大

再缩放地图,就看到刚才放大级别以外的视窗的marker都丢失了


另外:如果去除callout气泡,不会出现丢失的情况

<map id="map" class="map" bindregionchange="onRegionChange" show-location="true" scale="15" latitude="{{map.latitude}}" longitude="{{map.longitude}}" markers="{{markers}}" circles="{{map.circles}}" controls="{{map.controls}}" bindmarkertap="tapMarker" bindcallouttap="tapCallout" bindcontroltap="tapControl" />


page { width100%height100%;}
.map { width100%height100%;}



const shops = [{ "shopCateName""美发""address""杭州西湖风景名胜区-石人峰""latitude": 30.231426, "imageUrl""http://6xsalon-test.oss-cn-hangzhou.aliyuncs.com/Tenant/10000578/Shop/10001400/mainImg.门店主图2017-09-04-07-17-18-4313.png""shopName""门店-9""shopCateID": 101000, "shopID": 10001400, "longitude": 120.08649 }, { "shopCateName""美发""address""浙江省杭州市下城区武林广场""latitude": 30.27455, "imageUrl""http://meizemeiyi.oss-cn-hangzhou.aliyuncs.com/mini_back_2.jpg""shopName""彼此""shopCateID": 101000, "shopID": 10001409, "longitude": 120.15645 }, { "shopCateName""美发""address""浙江省杭州市下城区武林路520号""latitude": 30.272825, "imageUrl""http://meizemeiyi.oss-cn-hangzhou.aliyuncs.com/mini_back_1.jpg""shopName""13555555555""shopCateID": 101000, "shopID": 10001427, "longitude": 120.157173 }, { "shopCateName""搬运服务""address""杭州市上城区南星赞成·太和广场东(飞云江路北)""latitude": 30.216232, "imageUrl""http://meizemeiyi.oss-cn-hangzhou.aliyuncs.com/mini_back_8.jpg""shopName""一屋老友记允许""shopCateID": 161100, "shopID": 10001464, "longitude": 120.178553 }, { "shopCateName""体育运动""address""杭州市滨江区长河街道敬老院西南(长医路)""latitude": 30.168414, "imageUrl""http://meizemeiyi.oss-cn-hangzhou.aliyuncs.com/mini_back_4.jpg""shopName""Gfggg""shopCateID": 131000, "shopID": 10001470, "longitude": 120.194575 }, { "shopCateName""艺术培训""address""杭州市滨江区华为技术有限公司杭州研究所""latitude": 30.185281, "imageUrl""http://meizemeiyi.oss-cn-hangzhou.aliyuncs.com/mini_back_1.jpg""shopName""蓝翔""shopCateID": 141000, "shopID": 10001432, "longitude": 120.20413 }, { "shopCateName""摄影""address""杭州市滨江区杭州市旅游职业学校(滨兴路南)""latitude": 30.19148, "imageUrl""http://meizemeiyi.oss-cn-hangzhou.aliyuncs.com/shop_default.jpg""shopName""大逃亡""shopCateID": 111000, "shopID": 10001435, "longitude": 120.209579 }, { "shopCateName""摄影""address""白马湖""latitude": 30.142462, "imageUrl""http://6xsalon-test.oss-cn-hangzhou.aliyuncs.com/Tenant/10000563/Shop/10001321/mainImg.门店主图2017-07-18-04-22-44-2968.png""shopName""花果山""shopCateID": 111000, "shopID": 10001321, "longitude": 120.213209 }, { "shopCateName""摄像""address""杭州市滨江区威度运动中心(滨文路北)""latitude": 30.172838, "imageUrl""http://meizemeiyi.oss-cn-hangzhou.aliyuncs.com/mini_back_2.jpg""shopName""黄埔军校""shopCateID": 111100, "shopID": 10001469, "longitude": 120.214544 }, { "shopCateName""艺术培训""address""浙江省杭州市滨江区春波小区东苑15号商铺""latitude": 30.190522, "imageUrl""http://meizemeiyi.oss-cn-hangzhou.aliyuncs.com/mini_back_3.jpg""shopName""教育艺术培训门店,来找我吧""shopCateID": 141000, "shopID": 10001462, "longitude": 120.21708 }, { "shopCateName""摄影""address""杭州市滨江区凌久大厦西北160米(彩虹大道南)""latitude": 30.171481, "imageUrl""http://meizemeiyi.oss-cn-hangzhou.aliyuncs.com/mini_back_3.jpg""shopName""挂号费""shopCateID": 111000, "shopID": 10001472, "longitude": 120.219097 }, { "shopCateName""美发""address""提提""latitude": 30.166557, "imageUrl""http://6xsalon-test.oss-cn-hangzhou.aliyuncs.com/Tenant/10000573/Shop/10001340/mainImg.门店主图2017-08-08-05-06-43-9619.png""shopName""主人好帅""shopCateID": 101000, "shopID": 10001340, "longitude": 120.222217 }, { "shopCateName""美发""address""杭州市滨江区海威大厦(西陵路东)""latitude": 30.180594, "imageUrl""http://meizemeiyi.oss-cn-hangzhou.aliyuncs.com/shop_default.jpg""shopName""很时尚""shopCateID": 101000, "shopID": 10001477, "longitude": 120.222237 }, { "shopCateName""美发""address""浙江省杭州市滨江区西陵路玲珑府(官河锦庭东100米)""latitude": 30.18191, "imageUrl""http://meizemeiyi.oss-cn-hangzhou.aliyuncs.com/mini_back_8.jpg""shopName""快乐吧,帅哥""shopCateID": 101000, "shopID": 10001413, "longitude": 120.22468 }, { "shopCateName""美发""address""玲珑符""latitude": 30.183415, "imageUrl""http://6xsalon-test.oss-cn-hangzhou.aliyuncs.com/Tenant/10000555/Shop/10001263/mainImg.门店主图2017-07-10-08-57-11-0810.png""shopName""小毛测试""shopCateID": 101000, "shopID": 10001263, "longitude": 120.225664 }, { "shopCateName""设备租借""address""杭州市滨江区西兴水晶湾城市雅苑(后河头南)""latitude": 30.186323, "imageUrl""http://meizemeiyi.oss-cn-hangzhou.aliyuncs.com/mini_back_5.jpg""shopName""明眸皓齿""shopCateID": 111200, "shopID": 10001482, "longitude": 120.225881 }, { "shopCateName""法律服务""address""杭州市西兴滨江区创业人才公寓东南(北塘路北)""latitude": 30.193156, "imageUrl""http://meizemeiyi.oss-cn-hangzhou.aliyuncs.com/mini_back_1.jpg""shopName""UN——onion""shopCateID": 181000, "shopID": 10001428, "longitude": 120.226477 }, { "shopCateName""美发""address""杭州市滨江区湘云雅苑(滨兴路北)""latitude": 30.196668, "imageUrl""http://meizemeiyi.oss-cn-hangzhou.aliyuncs.com/mini_back_3.jpg""shopName""Yuh ghost""shopCateID": 101000, "shopID": 10001471, "longitude": 120.231471 }, { "shopCateName""美发""address""杭州市萧山区西兴瑞立东方花城(滨安路北)""latitude": 30.185365, "imageUrl""http://meizemeiyi.oss-cn-hangzhou.aliyuncs.com/shop_default.jpg""shopName""好纠结""shopCateID": 101000, "shopID": 10001468, "longitude": 120.231869 }, { "shopCateName""美发""address""湘湖""latitude": 30.152852, "imageUrl""http://6xsalon-test.oss-cn-hangzhou.aliyuncs.com/Tenant/10000550/Shop/10001258/mainImg.门店主图2017-07-04-03-35-57-1855.png""shopName""测试1""shopCateID": 101000, "shopID": 10001258, "longitude": 120.235908 }, { "shopCateName""美发""address""杭州乐园""latitude": 30.160736, "imageUrl""http://6xsalon-test.oss-cn-hangzhou.aliyuncs.com/Tenant/10000576/Shop/10001343/mainImg.门店主图2017-08-08-05-29-38-6796.png""shopName""天上人间""shopCateID": 101000, "shopID": 10001343, "longitude": 120.244974 }];
 
const calloutOptions = {
    // content: 'abcdf',
    borderRadius: 3,
    bgColor: '#252525',
    color: '#fff',
    display: 'ALWAYS',
    fontSize: 12,
    padding: 4,
    // boxShadow: '1px 1px 1px #000000',
}
Page({
 
    /**
     * 页面的初始数据
     */
    data: {
 
    },
 
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
 
        const circlesOptions = {
            color: '#0082ff',
            fillColor: '#7cb5ec',
            radius: 20000,
            strokeWidth: 1
        }
        let location = { "latitude": 30.274085, "longitude": 120.15507, "speed": -1, "accuracy": 65, "altitude": 0, "verticalAccuracy": 65, "horizontalAccuracy": 65, "errMsg""getLocation:ok" }
        this.setData({
            map: {
                latitude: location.latitude,
                longitude: location.longitude,
                circles: {
                    latitude: location.latitude,
                    longitude: location.longitude,
                    color: '#0082ff',
                    fillColor: '#7cb5ec',
                    radius: '20000',
                    strokeWidth: 1
                },
            }
        })
        this.renderShopMarkers()
    },
    renderShopMarkers: function () {
        let markers = []
        shops.forEach((o, i) => {
            markers.push({
                iconPath: '/assets/img/icon-location.png',
                id: o.shopID,
                latitude: o.latitude,
                longitude: o.longitude,
                width: 22,
                height: 22,
                alpha: 1,
                callout: {
                    content: o.shopName.length >= 8 ? o.shopName.substring(0, 7) + '...' : o.shopName,
                    borderRadius: calloutOptions.borderRadius,
                    bgColor: calloutOptions.bgColor,
                    color: calloutOptions.color,//this.getColorFromCateID(o.shopCateID),
                    display: calloutOptions.display,
                    fontSize: calloutOptions.fontSize,
                    padding: calloutOptions.padding,
                    boxShadow: calloutOptions.boxShadow,
                }
            })
        })
 
        this.setData({
            markers: markers
        })
    },
})



最后一次编辑于  2017-10-20
回答关注问题邀请回答
收藏

6 个回答

  • 黄思程
    黄思程
    2018-01-12

    你好,问题已复现,我们会在后续版本中进行修复。

    2018-01-12
    有用
    回复
  • 黄思程
    黄思程
    2017-10-20

    问题可以重现,我们定位一下

    2017-10-20
    有用
    回复
  • 黄思程
    黄思程
    2017-10-20

    你好,请提供一下能复现问题的代码示例。另外boxShadow暂未支持,文档有误,我们更正一下

    2017-10-20
    有用
    回复
  • 玩呗
    玩呗
    2018-05-23

    请问问题修复了吗?为什么关闭这个问题?

    2018-05-23
    有用
    回复
  • 黄黎
    黄黎
    2018-01-08

    只有在设置了callout 而且在iPhone手机上才会出现,我用的测试机是iphon6,缩放幅度比较大的情况

    2018-01-08
    有用
    回复
  • 徐乐
    徐乐
    2017-10-20

    请尽快验证问题,目前项目对callout依赖很严重。受到这一BUG的影响很大,谢谢。

    2017-10-20
    有用
    回复
登录 后发表内容