Mapbox-gl 关闭所有Popup,以及关闭按钮出现黑色边框bug

1.官方示例

var popup = new mapboxgl.Popup().addTo(map);

popup.remove();

很明显,需要记录popup对象,管理起来比较麻烦。

2.本人采用div的方式关闭所有的popup,在map对象上新增加方法

map.closePopup=mapView.popupClear = function(){
     $(".mapboxgl-popup").remove();
}

调用的时候,使用map.closePopup() 或者 map.popupClear

3.最近使用mapbox-gl新版本,发现popup出现如下界面效果,

而我们通常见到的效果如下:

不知道是什么原因,或者是测试时遗留下来的bug,作为一个完美主义者,必须搞定,增加一行css控制即可(其实在popup显示时使用了focus聚焦关闭按钮)。

.mapboxgl-popup-close-button {
	outline:none !important;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/98447.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ceph架构及 IO流程

CEPH是由多个节点构成的集群,它具有良好的可扩展性和可靠性。节点之间相互通信以达到: 存储和检索数据 数据复制 监控集群的健康状况 保证数据的完整性 检测故障并恢复 基本架构如下图: 分布式对象存储系统RADOS是CEPH最为关键的技术&a…

WebRTC音视频通话-WebRTC推拉流过程中日志log输出

WebRTC音视频通话-WebRTC推拉流过程中日志log输出 之前实现iOS端调用ossrs服务实现推拉流流程。 推流:https://blog.csdn.net/gloryFlow/article/details/132262724 拉流:https://blog.csdn.net/gloryFlow/article/details/132417602 在推拉流过程中的…

第 3 章 栈和队列(用递归函数求解迷宫问题(求出所有解))

1. 背景说明: 若迷宫 maze 中存在从入口 start 到出口 end 的通道,则求出所有合理解并求出最优解 迷宫示意图: 输入文本: 10 10181 3 1 7 2 3 2 7 3 5 3 6 4 2 4 3 4 4 5 4 6 2 6 6 7 2 7 3 7 4 7 6 7 7 8 11 18 8 2. 示例代码…

【计算机组成 课程笔记】3.1 算数运算和逻辑运算

课程链接: 计算机组成_北京大学_中国大学MOOC(慕课) 3 - 1 - 301-算术运算和逻辑运算(13-7--)_哔哩哔哩_bilibili 计算机的核心功能就是运算,运算的基本类型包括算数运算和逻辑运算。想要了解计算机是如何实现运算的,我…

Vlan和Trunk

文章目录 一、VLAN的定义与背景1. 传统以太网的问题(广播域)2. 用VLAN隔离广播域3. VLAN的优点与应用 二、VLAN的转发过程举例三、802.1Q标签:帧格式与作用四、VLAN工作原理交换机端口类型AccessTrunkHybrid PVID(Port VLAN ID&am…

【基于空间纹理的残差网络无监督Pansharpening】

Unsupervised Pansharpening method Using Residual Network with Spatial Texture Attention (基于空间纹理的残差网络无监督泛锐化方法) 近年来,深度学习已经成为最受欢迎的泛锐化工具之一,许多相关方法已经被研究并反映出良好…

android 实现本地一键打包,告别繁琐的studio操作

前言 在实际开发项目中,我们的工程目录往往是多个app在一个工程下的,每次打包都需要手动的用studio点击Build->Generate Signed Bundle or APK->APK 选择app,签名等,甚至有的app签名还不一样,还需要手动的来回切…

【esp32】解决以太网+mqtt堆栈溢出问题 报错 no mem for receive buffer

本文主要记录了 esp32 + 以太网 +mqtt 功能时遇到的堆栈溢出的情况,千里之堤毁于蚁穴,开发过程的不细心导致多付出了一天多的时间,记录于此,共勉 📋 个人简介 💖 作者简介:大家好,我是喜欢记录零碎知识点的小菜鸟。😎📝 个人主页:欢迎访问我的 Ethernet_Comm 博…

小游戏分发平台如何以技术拓流?

2023年,小游戏的发展将受到多方面的影响,例如新技术的引入、参与小游戏的新玩家以及游戏市场的激烈竞争等。首先,新技术如虚拟现实(VR)、增强现实(AR)和机器人技术都可以带来新颖的游戏体验。其…

【Qt学习】10 利用QSharedMemory实现单例运行

问题 让应用程序只有一个运行实例 QSharedMemory除了可以完成进程间通信,还可以实现应用程序单例化。 解法 首先,看看QSharedMemory的几个函数: 1、QSharedMemory(const QString &key, QObject *parent Q_NULLPTR)构造函数 该构造函数…

大模型综述论文笔记6-15

这里写自定义目录标题 KeywordsBackgroud for LLMsTechnical Evolution of GPT-series ModelsResearch of OpenAI on LLMs can be roughly divided into the following stagesEarly ExplorationsCapacity LeapCapacity EnhancementThe Milestones of Language Models Resources…

OPENCV实现计算描述子

1、计算描述子 kp,des = sift.computer(img,kp) 2、其作用是进行特征匹配 3、同时计算关键点和描述 3.1、kp,des = sift.detectAnd Computer(img,...)

Mysql表关联简单介绍(inner join、left join、right join、full join不支持、笛卡尔积)

文章目录 0. 交集、并集、差集含义说明1. 简单演示上图七种情况0. A、B表数据准备1. left outer join 简称 left join 左表所有数据,右表关联数据,没有的以null填充2. right outer join 简称 right join,右表所有数据,左表关联数据…

接口测试json入参,不同类型参数格式书写

接口json入参,不同类型参数格式 1、String 入参:A(String),B(String) 格式:{"A":"值a","B":"值b"} 示例: 接口测试入参这么…

UE 5 实现骨骼物理模拟 乳摇

打开角色的物理资产,如果是下载的或者官方的模型,都会内带物理资产 模拟 可以根据分块模拟当前物体的物理效果 点击右上角的模拟,可以模拟布娃娃系统 Ctrl鼠标右键可以实现对布娃娃施加力的效果。 模拟选中项 模拟选中项可以只模拟一部…

为什么聊天头像ChatGPT是橙色的?

目录 ChatGPT的不同版本及其颜色 了解绿色和橙色的ChatGPT徽标 颜色变化的重要性 橙色标志的原因 故障排除和常见问题解答 常见问题3:如何查看ChatGPT的服务器状态? 常见问题4:如果使用ChatGPT时遇到错误,我该怎么办&#…

linux刻录iso到u盘

需要的工具:Linux系统、U盘、ISO镜像文件。 首先在Linux系统中打开终端,使用dd命令,格式如下: sudo dd ifxxx.iso of/dev/sdb 命令中xxx.iso是你的ISO镜像文件的路径,of后面的你的U盘路径,一般就是/dev/sdb…

说说FLINK细粒度滑动窗口如何处理

分析&回答 Flink的窗口机制是其底层核心之一,也是高效流处理的关键。Flink窗口分配的基类是WindowAssigner抽象类,下面的类图示出了Flink能够提供的所有窗口类型。 Flink窗口分为滚动(tumbling)、滑动(sliding&am…

unity界面上Global 与Local xyz- right up forward

gloabal 如果要沿这个方向移动就比较困难 local下就不一样了

对于需要进行商品价格监控的企业来说,使用淘宝API是一种有效的途径

淘宝是一个广泛使用的在线购物平台,其API可以用于获取各种商品的价格数据。对于需要进行商品价格监控的企业来说,使用淘宝API是一种有效的途径。 以下是使用淘宝API进行商品价格监控的几个步骤: 获取API密钥 在使用淘宝API之前&#xff0c…