(九)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 文档后,会依次进行…...
ADS 2023 保姆级教程:从巴特沃斯到椭圆,手把手仿真你的第一个低通滤波器
ADS 2023 实战指南:三步完成低通滤波器设计与仿真 刚打开ADS软件时,那些密密麻麻的工具栏和陌生的术语确实容易让人望而生畏。但别担心,现代EDA工具早已将复杂的滤波器设计过程封装成了可视化操作。就像用智能手机拍照不需要理解图像传感器原…...
极客卸载工具深度解析:6.69MB的绿色卸载神器为何备受推崇
Windows系统长期面临软件卸载不彻底的问题。 系统自带的卸载功能往往无法清除残留文件和注册表项。 这些残留数据日积月累,会严重影响系统运行效率。 极客卸载工具正是为解决这一痛点而生。 极客卸载采用绿色单文件设计模式。 整个程序解压后仅有6.69MB的体积。 这…...
别再死记硬背Next数组了!用‘最长相等前后缀’这个核心概念,5分钟彻底搞懂KMP
从几何视角彻底理解KMP算法:Next数组的本质是字符串的自相似性 每次看到KMP算法中那个神秘的Next数组,总有种面对黑盒的感觉——明明代码只有几行,背后的逻辑却像被施了魔法。今天我们不谈公式推导,换个视角用"最长相等前后缀…...
逆向实战:手把手带你用Node.js复现某音a_bogus算法核心步骤(含完整代码)
深入解析Node.js实现a_bogus算法的核心逻辑与实战应用 在当今Web开发与数据采集领域,理解平台加密机制已成为开发者必备技能。a_bogus作为某平台核心加密参数,其生成过程融合了多种加密技术。本文将彻底拆解这一算法,从底层位运算到高层架构&…...
【PolarCTF】x64
先检查下,发现是64位的程序IDA分析程序这里很明显read函数存在溢出然后可以看到后面函数Shell同时也可以找到/bin/sh字符串这里我们可以通过IDA查找攻击思路如下:填充垃圾数据pop_rdi_ret将/bin/sh传递到rdi中执行Shell函数获得shellgdb调试程序将cyclic…...
从点阵到屏幕:深入解析STM32驱动LCD显示汉字的每一个字节(以16x16‘留’字为例)
从点阵到像素:STM32驱动LCD显示汉字的底层逻辑全解析 在嵌入式开发中,汉字显示是一个看似简单却暗藏玄机的技术点。当你在调试时遇到汉字显示乱码或错位的问题,是否曾好奇过这背后的完整数据流?本文将带你深入汉字显示的底层世界&…...
【实战指南】FreeRTOS 10.4.6源码解析与STM32F429移植全流程
1. FreeRTOS 10.4.6源码获取与解析 第一次接触FreeRTOS源码时,我对着官网密密麻麻的目录树发懵——这堆文件到底哪些才是核心?后来踩过几次坑才明白,Source和portable这两个文件夹就是整个系统的灵魂所在。以STM32F429为例,我们从…...
WindowResizer终极指南:轻松突破窗口尺寸限制的完整解决方案
WindowResizer终极指南:轻松突破窗口尺寸限制的完整解决方案 【免费下载链接】WindowResizer 一个可以强制调整应用程序窗口大小的工具 项目地址: https://gitcode.com/gh_mirrors/wi/WindowResizer 你是否曾经遇到过那些顽固的应用程序窗口,它们…...
vLLM生产环境部署血泪史:10大坑爹问题及保姆级解决方案,助你少走弯路!
本文分享了vLLM在生产环境部署中的实战经验,涵盖GPU显存碎片、延迟雪崩、长文本输入崩溃等10个常见问题,并提供详细的解决方案和优化配置。通过调整参数、优化模型加载和监控策略,有效提升系统性能和稳定性,帮助开发者顺利实现从D…...
融合注意力与多尺度:CBAM_ASPP模块在语义分割中的实践与性能分析
1. 从多尺度到注意力:为什么需要CBAM_ASPP? 语义分割任务的核心挑战在于如何同时捕捉场景中的全局上下文信息和局部细节特征。传统ASPP模块通过多组不同膨胀率的空洞卷积并行处理输入特征,确实能够覆盖不同尺度的感受野。但我在实际项目中发现…...
