百度地图 JS API 隐藏信息弹窗自带的关闭按钮

最新推荐文章于 2023-06-19 13:07:31 发布
最新推荐文章于 2023-06-19 13:07:31 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： 百度地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43422861/article/details/113866487
版权 
var infoWindow = new BMap.InfoWindow(appendDiv);  // 创建信息窗口对象
infoWindow.addEventListener('open',function(type, target, point){ //窗口打开是，隐藏自带的关闭按钮
    $('.BMap_pop>img').hide();
})
Paul_Chan_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
百度地图自定义关闭弹出框阴影
qq_39876864的博客
04-09 3384
    当我们自定义百度地图弹出框时，一般也会自定义它的关闭按钮。这样本来也没什么问题，可是会在关闭了弹出框以后，在地图上出来一个投射的阴影。这就很尴尬了，这会让设计师很不爽，所以我们需要把这个阴影也去掉，我最开始做的是$('.BMap_shadow').html('');这样第一次关闭的时候没什么问题，阴影也会消失，但是重新点击经纬度生成的点想要提示框时，就会报错了，所以我改成$('.BMap_...
百度地图信息窗口按钮
12-23
通过图片按钮，在百度地图信息窗口显示一个漂亮的按钮
百度地图InfoWindow去掉关闭按钮
FJ101113的博客
06-19 1053
最新做项目遇到的需求是进入页面百度地图默认显示信息窗体，且不显示关闭按钮，效果如图所示。1、 安装相关依赖后在main.js中引入。2、新建组件baidu.index。
百度地图添加点聚合 地图移动 信息窗口关闭
小白
12-20 780
百度地图添加点聚合 地图移动 信息窗口关闭 百度地图添加点聚合后 地图缩放移动会触发点聚合重绘事件 使用map上绑定 map.openInfoWindow(info,point)可解决点聚合重绘覆盖infowindow的问题 ...
vue cli 调取百度地图使用自定义弹框BMapLib.InfoBox（） 创建的弹框默认关闭按钮如何隐藏
rpf1234的博客
06-07 1366
vue cli 调取百度地图使用自定义弹框BMapLib.InfoBox（） 创建的弹框默认关闭按钮如何隐藏 代码如下 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=1920,initial-scale=1.0"/> <title>zhihuixunhe&
百度地图 JS API 隐藏信息弹窗自带的关闭按钮
热门推荐
kylvia的专栏
03-01 1万+
隐藏信息弹窗自带的关闭按钮var infoWindow = new BMap.InfoWindow(appendDiv); // 创建信息窗口对象 infoWindow.addEventListener('open',function(type, target, point){ //窗口打开是，隐藏自带的关闭按钮 $('.BMap_pop>img').hide(); })
百度地图富消息框以及显示关闭。
jxdv1112的专栏
12-24 3412
// 创建标注电图标  var  po = new BMap.Icon("ico.png", new BMap.Size(44, 44), {});   //创建标注点 var marker=new BMap.Marker(this.point, {icon: po}); // 创建地图上的标注点  map.addOverlay(marker); // 监听点击标注点 this.
arcgis api for js 自定义弹出信息提示框
02-09
在GIS领域，ArcGIS API for JavaScript 是Esri公司提供的一个强大的Web地图开发工具，它允许开发者构建交互式、数据驱动的地图应用。在这个场景中，我们关注的是如何利用这个API来实现自定义的弹出信息提示框。弹出...
sweetAlert弹窗文件 .zip
01-04
8. **关闭按钮**：默认情况下，用户可以通过点击弹窗外的区域或按Esc键关闭弹窗，这些行为可以通过配置选项进行调整。 9. **异步操作**：在执行异步操作（如Ajax请求）时，可以利用 SweetAlert 的 `timer` 或 `...
jQuery Alert弹窗插件点击弹出对话框代码
11-10
8. **API控制**：除了通过事件触发，还可以通过API直接控制弹窗的显示、关闭和更新。如`$.alert('open')`来打开弹窗，`$.alert('close')`关闭弹窗，`$.alert('update', {content: '新的内容'})`更新弹窗内容。 9. *...
百度地图 自定义信息窗口 InfoBox.js
12-12
百度地图 自定义信息窗口 InfoBox.js 只做有效的信息共享
layui.zip layui api文档 使用说明
10-15
3. **丰富的组件**：layui包含了大量的UI组件，如表格、表单、按钮、图标、弹窗、下拉菜单、轮播图、进度条、提示信息等，满足开发中的各种需求。 4. **强大的表格**：layui的表格组件支持数据的动态加载、排序、...
用webbox 弹出登陆框,地图
10-08
如果需要在登录框中集成地图功能，可能涉及到引入地图API，如Google Maps API或高德地图API，用于展示地理位置信息或者实现特定的地理服务。 8. **最佳实践**：遵循Web无障碍性标准(WCAG)，确保所有用户，包括残障...
百度地图禁用图层标注的infoWindow弹框
Change_ItMan的博客
02-01 889
遇到的问题： 在我们使用百度地图做地图标注时，单击添加时，如果点中图层中原生的标注会出现如下现象： 我们自定义的infoWindow会一闪而退，没办法做我们自己的添加操作； 产生的原因： 同是单击事件，当点击地图原生标注时弹出的infoWindow属于详情信息，比我们自定义的infoWindow先弹出。 解决方法： var map = new BMap.Map("allmap",{en...
【百度地图】BMapLib的infoBox窗体关闭按钮在移动端点击失效问题解决
wan小小冰的博客
05-29 4231
BMapLib库的窗体自定义的关闭按钮在移动端由于阻止了其冒泡事件，在窗体中的点击事件都不生效，现在自己定义一个新的关闭按钮对其进行监听，利用touchend事件关闭窗体； 一、JS代码 //定义窗口内容 var info = &amp;amp;quot;&amp;amp;amp;lt;div class='plat-box qypopup'&amp;amp;amp;gt;&amp;amp;quot; + &amp;amp;quot;
百度地图信息窗口设置 监测信息窗口的打开和关闭
weixin_43055079的博客
07-21 3246
设置信息窗口样式 设置好的信息窗口 代码 直接粘贴就行 .BMap_cpyCtrl { display: none; } .anchorBL { display: none; } .BMap_bubble_title { color:white; font-size:13px; font-weight:bold; text-align:left; padding-left:5px; padding-top:5px; border-bottom:1px solid gray; ba
百度地图API取消点击景点弹出框
ccyy
10-19 2245
有时候我们自己在地图上添加的标注会跟百度地图上面的景点商家标注重合。点击的时候就会弹出景点弹窗。 就像这样： 我们正常在创建地图的时候都是： var map = new BMap.Map("allmap"); // 创建Map实例 想要禁用百度地图景点弹窗需要添加点东西： var map = new BMap.Map("allmap", { enableMapClick: false }); // 创建Map实例 增加 { enableMapClick: false }配置项即
百度地图覆盖物信息显示和隐藏
weixin_30690833的博客
06-29 876
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overfl...
[课题设计]SSM框架开发个人通讯录+jsp+Java前后端分离带论文和源码.zip
最新发布
07-20
本项目是一个基于SSM框架开发的个人通讯录应用，采用JSP作为前端技术，实现了前后端分离。项目针对计算机相关专业的学生以及需要进行项目实战练习的Java学习者，提供了完整的源码、数据库脚本和开发说明，同时附带论文参考，可作为毕业设计或课程设计的优质资源。 在功能方面，该项目实现了基本的通讯录增删改查功能，用户可以通过前端界面录入、修改和查询联系人信息，后台则通过SSM框架进行数据处理和业务逻辑的实现。此外，项目还支持分页显示功能，提高了用户体验。 技术层面，项目采用了成熟的SSM框架进行开发，确保了代码的结构清晰、易于维护。数据库选用MySQL，稳定可靠，且易于扩展。开发环境包括JDK、IDEA和Tomcat，配置简单，便于上手。 经过严格的调试，项目已确保可稳定运行。对于有一定基础的Java学习者，还可以在此基础上进行功能拓展，进一步提升实战能力。
使用百度地图api，在地图上添加信息弹窗和按钮
06-07
要在百度地图API上添加信息弹窗和按钮，可以按照以下步骤进行： 1. 创建信息窗口和按钮的 HTML 代码，如下所示： ```html <div id="map"></div> <!-- 信息窗口 --> <div id="infoWindow" style="display:none;width:200px;height:100px;"> <p>这里是信息窗口</p> <button id="btn">点击按钮</button> </div> ``` 在上面的代码中，我们创建了一个 id 为 "infoWindow" 的 div 元素，用于显示信息窗口。信息窗口中包括一段文字和一个 id 为 "btn" 的按钮。 2. 初始化地图，并添加信息窗口和按钮到地图中，如下所示： ```html <script type="text/javascript"> // 初始化地图 var map = new BMap.Map("map"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 创建信息窗口 var infoWindow = new BMap.InfoWindow(document.getElementById("infoWindow")); map.openInfoWindow(infoWindow, new BMap.Point(116.404, 39.915)); // 显示信息窗口 // 创建按钮和按钮事件 var btn = document.getElementById("btn"); btn.onclick = function() { alert("点击了按钮"); }; var btnOverlay = new BMap.Control(); btnOverlay.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; btnOverlay.setOffset(new BMap.Size(10, 10)); btnOverlay.setHtml('<button id="btn">点击按钮</button>'); map.addControl(btnOverlay); </script> ``` 在上面的代码中，我们创建了一个信息窗口，并将其显示在地图上。然后创建了一个 id 为 "btn" 的按钮，并添加了一个点击事件。接着创建了一个 BMap.Control 对象，并将其设置为左上角，并设置了偏移量和 HTML 内容，最后将按钮添加到地图中。 3. 添加弹窗和按钮的样式，如下所示： ```html <style type="text/css"> #infoWindow p { margin: 10px; font-size: 16px; } #infoWindow button { display: block; margin: 10px auto; padding: 5px 10px; background-color: #0099FF; color: #FFFFFF; border: none; border-radius: 5px; cursor: pointer; } .BMap_control button { display: block; margin: 10px auto; padding: 5px 10px; background-color: #0099FF; color: #FFFFFF; border: none; border-radius: 5px; cursor: pointer; } </style> ``` 在上面的代码中，我们设置了信息窗口和按钮的样式，使其更加美观。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值