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

2024-06-15 08:32

本文主要是介绍当容器处于隐藏状态时,调用百度地图会出现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的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1062937

相关文章

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示

c++中的set容器介绍及操作大全

《c++中的set容器介绍及操作大全》:本文主要介绍c++中的set容器介绍及操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录​​一、核心特性​​️ ​​二、基本操作​​​​1. 初始化与赋值​​​​2. 增删查操作​​​​3. 遍历方

Python中Tensorflow无法调用GPU问题的解决方法

《Python中Tensorflow无法调用GPU问题的解决方法》文章详解如何解决TensorFlow在Windows无法识别GPU的问题,需降级至2.10版本,安装匹配CUDA11.2和cuDNN... 当用以下代码查看GPU数量时,gpuspython返回的是一个空列表,说明tensorflow没有找到

python如何调用java的jar包

《python如何调用java的jar包》这篇文章主要为大家详细介绍了python如何调用java的jar包,文中的示例代码简洁易懂,具有一定的借鉴价值,有需要的小伙伴可以参考一下... 目录一、安装包二、使用步骤三、代码演示四、自己写一个jar包五、打包步骤六、方法补充一、安装包pip3 install

springboot项目中整合高德地图的实践

《springboot项目中整合高德地图的实践》:本文主要介绍springboot项目中整合高德地图的实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一:高德开放平台的使用二:创建数据库(我是用的是mysql)三:Springboot所需的依赖(根据你的需求再

Java调用C#动态库的三种方法详解

《Java调用C#动态库的三种方法详解》在这个多语言编程的时代,Java和C#就像两位才华横溢的舞者,各自在不同的舞台上展现着独特的魅力,然而,当它们携手合作时,又会碰撞出怎样绚丽的火花呢?今天,我们... 目录方法1:C++/CLI搭建桥梁——Java ↔ C# 的“翻译官”步骤1:创建C#类库(.NET

IIS 7.0 及更高版本中的 FTP 状态代码

《IIS7.0及更高版本中的FTP状态代码》本文介绍IIS7.0中的FTP状态代码,方便大家在使用iis中发现ftp的问题... 简介尝试使用 FTP 访问运行 Internet Information Services (IIS) 7.0 或更高版本的服务器上的内容时,IIS 将返回指示响应状态的数字代

C/C++和OpenCV实现调用摄像头

《C/C++和OpenCV实现调用摄像头》本文主要介绍了C/C++和OpenCV实现调用摄像头,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录准备工作1. 打开摄像头2. 读取视频帧3. 显示视频帧4. 释放资源5. 获取和设置摄像头属性

使用Python实现调用API获取图片存储到本地的方法

《使用Python实现调用API获取图片存储到本地的方法》开发一个自动化工具,用于从JSON数据源中提取图像ID,通过调用指定API获取未经压缩的原始图像文件,并确保下载结果与Postman等工具直接... 目录使用python实现调用API获取图片存储到本地1、项目概述2、核心功能3、环境准备4、代码实现