(九)Mapbox GL JS 中 Marker 图层的使用详解
什么是 Marker?
在 Mapbox GL JS 中,Marker(标记) 是一个可视化元素,用于在地图上标记特定的地理位置。它可以是一个默认的图标、自定义的图像,或者任何 HTML 元素。Marker 不仅能显示位置,还能通过点击、拖动等交互方式增强用户体验。
Marker 的基本使用
要使用 Marker,首先需要创建一个 Mapbox GL JS 地图实例,然后通过 mapboxgl.Marker 类创建并添加 Marker。
示例代码
// 创建地图实例
const map = new mapboxgl.Map({container: 'map', // HTML 容器 IDstyle: 'mapbox://styles/mapbox/streets-v11', // 地图样式center: [120.5, 40], // 初始中心点 [经度, 纬度]zoom: 9 // 初始缩放级别
});// 定义一些示例标记点位置
const markers = [{ lngLat: [116.397428, 39.90923], title: '天安门' },{ lngLat: [116.402544, 39.914714], title: '故宫博物院' },{ lngLat: [116.390419, 39.899787], title: '西单商业区' }
]// 添加标记markers.forEach((marker: any) => {// 默认的标记new mapboxgl.Marker().setLngLat(marker.lngLat).addTo(map as mapboxgl.Map)}
在这个例子中,我们创建了一个默认的 Marker(蓝色图标),并将其放置在经纬度 [-74.5, 40] 的位置。

自定义 Marker
Marker 支持多种自定义方式,包括自定义图标、添加弹出窗口(Popup)、设置偏移量等。
1. 使用自定义图标
你可以将 Marker 替换为自定义图像。
示例代码
const marker = new mapboxgl.Marker({element: document.createElement('img'), // 创建 img 元素anchor: 'bottom' // 设置锚点为底部
})
.setLngLat([-74.5, 40])
.addTo(map);marker.getElement().src = 'path/to/your/image.png'; // 设置图像路径
这里,我们用一个 img 元素替代默认图标,并指定图像路径,anchor: 'bottom' 确保图像底部对齐到指定位置。
2. 添加弹出窗口(Popup)
Popup 可以在点击 Marker 时显示额外信息。
示例代码
const popup = new mapboxgl.Popup({ offset: 25 }) // 创建 Popup,设置偏移量.setText('Hello, World!'); // 设置显示文本const marker = new mapboxgl.Marker().setLngLat([-74.5, 40]).setPopup(popup) // 绑定 Popup.addTo(map);
点击 Marker 时,会弹出一个显示 “Hello, World!” 的窗口,offset: 25 确保 Popup 与 Marker 有适当距离。
3. 设置偏移量
偏移量可以调整 Marker 的显示位置。
示例代码
const marker = new mapboxgl.Marker({offset: [0, -20] // 向上偏移 20 像素
})
.setLngLat([-74.5, 40])
.addTo(map);
这里,Marker 向上移动了 20 像素,便于更精确地对齐。
Marker 的交互
Marker 支持用户交互,如点击和拖动。
1. 点击事件
可以通过监听点击事件添加交互逻辑。
示例代码
const marker = new mapboxgl.Marker().setLngLat([-74.5, 40]).addTo(map);marker.getElement().addEventListener('click', () => {alert('Marker clicked!');
});
点击 Marker 时,会弹出一个提示框。
2. 拖动 Marker
Marker 可以设置为可拖动,用户拖动后可获取其新位置。
示例代码
const marker = new mapboxgl.Marker({draggable: true // 启用拖动
})
.setLngLat([-74.5, 40])
.addTo(map);marker.on('dragend', () => {const lngLat = marker.getLngLat(); // 获取拖动后的经纬度console.log(`Marker dragged to: ${lngLat.lng}, ${lngLat.lat}`);
});
拖动结束后,控制台会输出 Marker 的新经纬度。
使用场景
Marker 在多种实际场景中非常实用,例如:
-
位置标记
用于标记用户当前位置、商店位置或任何感兴趣的点。 -
信息展示
通过 Popup 显示详细信息,如地址、营业时间等。 -
交互式应用
允许用户通过拖动 Marker 选择位置,例如设置配送地址或规划路线。
注意事项
- 性能:如果地图上有大量 Marker,可能会影响渲染性能。此时,可以考虑使用 GeoJSON 数据和符号层(Symbol Layer)替代。
- 兼容性:Marker 是基于 HTML 的,某些情况下可能与 WebGL 渲染的地图层不完全兼容。
- 样式:自定义 Marker 时,应确保其样式与地图整体风格一致,提升视觉效果。
总结
Mapbox GL JS 中的 Marker 是一个强大且灵活的工具,适用于在地图上添加标记并实现交互功能。通过基本使用、自定义(如图标和 Popup)、交互(如点击和拖动),开发者可以轻松构建丰富的地图应用。希望这篇详解能帮助你更好地掌握 Marker 的用法,并在实际项目中灵活运用!
相关文章:
(九)Mapbox GL JS 中 Marker 图层的使用详解
什么是 Marker? 在 Mapbox GL JS 中,Marker(标记) 是一个可视化元素,用于在地图上标记特定的地理位置。它可以是一个默认的图标、自定义的图像,或者任何 HTML 元素。Marker 不仅能显示位置,还能…...
2k1000LA 使能 nand.
背景 : 默认的 发货的镜像 确实 是识别不了 nand 的。 ------------------------------------------------------------------------------------------ 但是 我之前 已经写好了文档,因此 拷贝到线上。 1 首先我要使能这几个。 在menuconfig 中使能一下。...
Junit+Mock
base project <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.6.11</version><relativePath/></parent><dependencies><!--添加mysql依…...
maven编译出错,javac: ��Ч��Ŀ�귢�а�: 17
1、异常信息 javac: ��Ч��Ŀ�귢�а�: 17 ��: javac <options> <source files> -help �����г&a…...
Vue使用Three.js加载glb (gltf) 文件模型及实现简单的选中高亮、测距、测面积
安装: # three.jsnpm install --save three 附中文网: 5. gltf不同文件形式(.glb) | Three.js中文网 附官网: 安装 – three.js docs 完整代码(简易demo): <template><div class"siteInspe…...
<el-table>右侧有空白列解决办法
问题如图: 解决办法:.box 为本页面最外层的class名,保证各个页面样式不会互相污染。 .box::v-deep .el-table th.gutter {display: none;width: 0}.box ::v-deep.el-table colgroup col[namegutter] {display: none;width: 0;}.box::v-deep …...
Linux网络 网络层
IP 协议 协议头格式 4 位版本号(version): 指定 IP 协议的版本, 对于 IPv4 来说, 就是 4. 4 位头部长度(header length): IP 头部的长度是多少个 32bit, 也就是 4 字节,4bit 表示最大的数字是 15, 因此 IP 头部最大长度是 60 字节. 8 位服务类型(Type Of Service):…...
系统讨论Qt的并发编程——逻辑上下文的分类
目录 前言 首先,讨论Qt里常见的三种上下文 同一线程的串行执行 同一线程的异步执行 多线程的执行 moveToThread办法 前言 笔者最近看了一个具备一定启发性质的Qt教程,在这里,笔者打算整理一下自己的笔记。分享在这里. 首先,…...
《Linux Shell 脚本深度探索:原理与高效编程》
1. 基本结构 Shebang 行 #!/bin/bash # Shebang 行指定了脚本使用的解释器。 /bin/bash 表示使用 Bash 解释器执行脚本。 注释 # 这是注释,不会被执行 2. 变量 定义变量 variable_namevalue # 不需要加 $ 来定义变量。 # 变量名不能包含空格或特殊字符。 访…...
深入剖析:基于红黑树实现自定义 map 和 set 容器
🌟 快来参与讨论💬,点赞👍、收藏⭐、分享📤,共创活力社区。🌟 在 C 标准模板库(STL)的大家庭里,map和set可是超级重要的关联容器成员呢😎&#x…...
在大数据项目中如何设计和优化数据模型
在大数据项目中,设计和优化数据模型是一个涉及多个步骤和维度的复杂过程。以下是我通常采取的方法: 一、数据模型设计 明确业务需求: 深入了解项目的业务场景和目标,明确数据模型需要解决的具体问题。与业务团队紧密合作…...
JavaScript querySelector()、querySelectorAll() CSS选择器解析(DOM元素选择)
文章目录 基于querySelector系列方法的CSS选择器深度解析一、方法概述二、基础选择器类型1. 类型选择器2. ID选择器3. 类选择器4. 属性选择器 三、组合选择器1. 后代组合器2. 子元素组合器3. 相邻兄弟组合器4. 通用兄弟组合器 四、伪类与伪元素1. 结构伪类2. 状态伪类3. 内容伪…...
Linux系统中处理子进程的终止问题
1. 理解子进程终止的机制 在Unix/Linux系统中,当子进程终止时,会向父进程发送一个SIGCHLD信号。父进程需要捕捉这个信号,并通过调用wait()或waitpid()等函数来回收子进程的资源。这一过程被称为“回收僵尸进程”。 如果父进程没有及时调用w…...
Docker 不再难懂:快速掌握容器命令与架构原理
1. Docker 是容器技术的一种 容器(Container)概述 容器(Container)是一种轻量级的虚拟化技术,它将应用程序及其所有依赖环境打包在一个独立的、可移植的运行时环境中。容器通过操作系统级的虚拟化提供隔离࿰…...
取消票证会把指定的票证从数据库中删除,同时也会把票证和航班 等相关表中的关联关系一起删除。但在删除之前,它会先检查当前用户是否拥有这张票
在做航班智能客服问答系统时会遇到取消票证的场景,这里涉及数据库的操作时会把指定的票证从数据库中删除,同时也会把票证和航班等相关表中的关联关系一起删除。但在删除之前,需要先检查当前用户是否拥有这张票,只有票主才有权限取…...
力扣-贪心-763 划分字母区间
思路 先统计字符串中每一个字母出现的最后下标,然后从end初始化为第一个字母出现的最后下标,在i<end时,不断更新end,因为一旦囊括新的字母就最起码要遍历到新字母出现的最后下标,在i>end时,说明遍历…...
【Redis 原理】网络模型
文章目录 用户空间 && 内核空间阻塞IO非阻塞IO信号驱动IO异步IOIO多路复用selectpollepoll Web服务流程Redis 网络模型Redis单线程网络模型的整个流程Redis多线程网络模型的整个流程 用户空间 && 内核空间 为了避免用户应用导致冲突甚至内核崩溃,用…...
cpp中的继承
一、继承概念 在cpp中,封装、继承、多态是面向对象的三大特性。这里的继承就是允许已经存在的类(也就是基类)的基础上创建新类(派生类或者子类),从而实现代码的复用。 如上图所示,Person是基类&…...
DeepSeek全栈接入指南:从零到生产环境的深度实践
第一章:DeepSeek技术体系全景解析 1.1 认知DeepSeek技术生态 DeepSeek作为新一代人工智能技术平台,构建了覆盖算法开发、模型训练、服务部署的全链路技术栈。其核心能力体现在: 1.1.1 多模态智能引擎 自然语言处理:支持文本生成(NLG)、语义理解(NLU)、情感分析等计算…...
CSS 真的会阻塞文档解析吗?
在网页开发领域,一个常见的疑问是 CSS 是否会阻塞文档解析。理解这一问题对于优化网页性能、提升用户体验至关重要。要深入解答这个问题,需要从浏览器渲染网页的原理说起。 浏览器渲染网页的基本流程 浏览器在接收到 HTML 文档后,会依次进行…...
安全使用 static_cast 进行类型转换的技巧
在 C++ 编程中,类型转换是一个常见但需要谨慎处理的操作。特别是当涉及到继承体系中的类型转换时,static_cast 和 dynamic_cast 之间的选择常常会引起讨论。本文将探讨如何安全地使用 static_cast 进行类型转换,并结合实例说明其使用场景。 理解 static_cast static_cast …...
YOLOv5-face:面向实时人脸检测的优化架构与应用实践
YOLOv5-face:面向实时人脸检测的优化架构与应用实践 【免费下载链接】yolov5-face YOLO5Face: Why Reinventing a Face Detector (https://arxiv.org/abs/2105.12931) ECCV Workshops 2022) 项目地址: https://gitcode.com/gh_mirrors/yo/yolov5-face YOLOv5…...
H3C交换机上给不同VLAN配DHCP,一次搞定网关、地址池和DNS(附完整命令)
H3C交换机多VLAN场景下的DHCP服务配置实战指南 在中小型企业网络或实验室环境中,随着设备数量的增加和网络结构的复杂化,手动为每台终端配置静态IP地址变得越来越不现实。这时候,DHCP(动态主机配置协议)服务就显得尤为…...
终极Minecraft启动器指南:UltimMC让你的游戏体验更自由
终极Minecraft启动器指南:UltimMC让你的游戏体验更自由 【免费下载链接】Launcher Offline Minecraft launcher. 项目地址: https://gitcode.com/gh_mirrors/lau/Launcher UltimMC是一款功能强大的Minecraft自定义启动器,专为追求自由灵活游戏体验…...
模拟IC版图DRC实战:手把手教你搞定MIM电容天线错误和ESD.10g违例
模拟IC版图DRC实战:MIM电容天线错误与ESD.10g违例深度解析 深夜的实验室里,屏幕上的DRC报错像一场突如其来的暴风雨——37个"A.R.MIM"天线错误和12处"ESD.10g"违例。这场景对每位模拟IC版图工程师都不陌生,尤其在tape-ou…...
Bootstrap中.d-none类在不同分辨率下的高级用法
.d-none 单独使用会在所有尺寸下隐藏元素,因其含 !important 会覆盖无 !important 的响应式显示类;正确做法是避免混用,改用纯响应式组合如 .d-md-block .d-lg-flex。为什么 .d-none 在某些断点下不生效?Bootstrap 的 .d-none 是个…...
【量化实战】解码期权PCR:从情绪指标到稳健策略的构建与优化
1. 期权PCR指标的本质与市场情绪解码 第一次接触期权PCR指标时,我和大多数新手一样困惑——这个看似简单的比值背后,到底藏着什么市场秘密?经过多年实战,我发现它就像市场的"心电图",能实时反映投资者的集体…...
Qt网络请求的‘收件箱’:QNetworkReply信号与槽的保姆级实战指南
Qt网络请求的‘收件箱’:QNetworkReply信号与槽的保姆级实战指南 想象一下,你每天打开电子邮箱时,系统会自动分类新邮件:重要通知、广告推广、文件附件...而Qt中的QNetworkReply正是这样一个智能收件箱,它能自动分类网…...
三步搞定Windows ADB驱动安装:告别繁琐配置,专注Android开发
三步搞定Windows ADB驱动安装:告别繁琐配置,专注Android开发 【免费下载链接】Latest-adb-fastboot-installer-for-windows A Simple Android Driver installer tool for windows (Always installs the latest version) 项目地址: https://gitcode.com…...
AGI在员工体验管理中的隐秘应用:从情绪语义分析到个性化发展路径生成(仅限头部科技公司内部验证)
第一章:AGI在员工体验管理中的隐秘应用:从情绪语义分析到个性化发展路径生成(仅限头部科技公司内部验证) 2026奇点智能技术大会(https://ml-summit.org) 在硅谷与西雅图的三座超算中心内,某头部AI原生企业已将AGI模型…...
