当容器处于隐藏状态时，调用百度地图会出现bug

本文主要是介绍当容器处于隐藏状态时，调用百度地图会出现bug，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<style type="text/css">#allmap{width:100%;height:500px;}.map img{max-width:none;}
</style>

部分api修改api中style里的#allmap式样（width、height）会出现白屏问题。

另外，自己写的img式样会覆盖百度地图api中的img图标式样，导致地图中图标式样出现问题。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=我的秘钥"></script>

秘钥百度官网自行申请。

<div class="tab-con3"><a class="title" name="mao3">楼盘地址</a><div class="map" style="height:413px;width:1209px;"><div id="allmap"></div></div>
</div>

// 百度地图API功能 
/****（11111111）****/
var map = new BMap.Map("allmap");          
$('.tab-con3').css("display","block");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
var local = new BMap.LocalSearch(map, {renderOptions:{map: map}
});
local.search("北京市东城区王府井大街88号");
/****（11111111）****/

$(document).ready(function(){$(".details-info .nav a").click(function(){var index = $(this).index();$(".details-info .nav a").eq(index).addClass("current").siblings().removeClass("current");});$("#info1").click(function(){$(".tab-con1").css("display","block");$(".tab-con2").css("display","none");$(".tab-con3").css("display","none");}); $("#info2").click(function(){$(".tab-con1").css("display","none");$(".tab-con2").css("display","block");$(".tab-con3").css("display","none");}); $("#info3").click(function(){$(".tab-con1").css("display","none");$(".tab-con2").css("display","none");$(".tab-con3").css("display","block");/****（22222222）****/});

<style type="text/css">.details-info .tab-con2,.details-info .tab-con3{display:none;}
</style>

其中引入的以上式样会导致百度地图api认为地图宽高为0，导致调用的地图出现各式各样的问题。

解决方法：建议等待容器处于可见状态后再初始化地图。即将(11111111)处的代码移至(22222222)处即可解决。

这篇关于当容器处于隐藏状态时，调用百度地图会出现bug的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---