当容器处于隐藏状态时,调用百度地图会出现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)处即可解决。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值