百度地图引入个性化样式,加载时出现大片白块的解决办法

百度地图引入个性化样式,加载时出现大片白块的解决办法

问题描述

大屏使用某个地区的详细地图，设置了百度地图自定义样式为深蓝色地图，但是加载的时候，瓦片会出现大片白色的情况，之后才会加载出来深蓝色地图，本文介绍一个方法，来解决加载的时候出现大片白色的问题

直奔主题

前端样式定义

<div id="map-container" class="delay-map"></div>

JS内设置地图的自定义样式

map.setMapStyleV2({
            styleId: "自定义样式ID"
          })

加载出现白色的情况

修改后的情况

可以看的出来，修改后的情况更加符合审美，并且贴合整体情况

具体修改内容

修改思路，通过样式添加过度时间，设置标签的背景颜色和不透明度，实现过度背景色是自定义的颜色

#map-container {
width: 100%;
height: 520px;
box-shadow: 0 0 15px 10px #062961;
margin-top: -70px;
}

/*这里设置地图的加载背景自定义颜色  设置不透明度（设置为最低，不然加载完成后背景颜色会遮挡住底部的线路和文字标记信息） */
#map-container {
.BMap_mask {
opacity: 0.01;
background-color: #062961;
}

//这个设置完会有一个淡入的效果 时间设置越长加载的时间越长 延迟在没有加载完成的情况下 地图就会加载好 把这个延迟给顶掉 实现颜色过渡
transition-duration: 15s;
}
/* 设置加载延迟为2s，这个自定义设置 */
.delay-map {
transition-delay: 2s;
}