前置条件: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的影响很大,谢谢。