前置条件: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 { width: 100%; height: 100%;}.map { width: 100%; height: 100%;} |
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 }) },}) |

你好,问题已复现,我们会在后续版本中进行修复。
问题可以重现,我们定位一下
你好,请提供一下能复现问题的代码示例。另外boxShadow暂未支持,文档有误,我们更正一下
请问问题修复了吗?为什么关闭这个问题?
只有在设置了callout 而且在iPhone手机上才会出现,我用的测试机是iphon6,缩放幅度比较大的情况
请尽快验证问题,目前项目对callout依赖很严重。受到这一BUG的影响很大,谢谢。