066：mapboxGL的marker的drag，dragstart，dragend三种触发事件示例

已于 2024-05-21 15:00:49 修改
阅读量688 收藏 40
点赞数 43
CC 4.0 BY-SA版权
分类专栏： # mapboxGL示例教程100+ 文章标签： mapbox标记事件 大剑师 MapboxGL教程 MapboxGL示例
于 2023-10-26 00:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/134032840
该博客由大剑师兰特撰写，分享了在Vue + MapboxGL中处理marker拖拽事件的示例，包括drag、dragstart和dragend三种触发事件的详细处理方法。提供了示例源代码和配置说明，读者可通过复制代码快速实现marker拖拽效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 066个示例

文章目录

一、示例效果图

二、示例简介

本示例演示如何在vue+mapbox中处理marker的三种触发事件drag，dragstart，dragend。 marker通过on(‘XXX’, callback),的方式进行触发处理。

直接复制下面的 vue+mapbox源代码，操作2分钟即可运行实现效果

三、配置说明

1）查看基础设置：https://xiaozhuanlan

了解本专栏 订阅专栏 解锁全文
使用Mapbox GL进行地图事件和图层事件的GIS分析
ChDevops的博客
09-24 360
使用Mapbox GL进行地图事件和图层事件的GIS分析可以帮助开发人员处理地图交互和操作。本文介绍了如何使用Mapbox GL捕获地图事件和图层事件，并提供了相应的源代码示例。它支持地图事件和图层事件，使开发人员能够处理地图上发生的交互和操作。本文将介绍如何使用Mapbox GL处理地图事件和图层事件，并提供相应的源代码示例。Mapbox GL提供了一系列的地图事件类型，可以通过注册事件处理程序来捕获这些事件并作出相应的响应。图层事件是与地图上的图层相关的事件，可以捕获用户与特定图层的交互。
Mapbox GL示例教程【目录】-- 已有82篇
大剑师兰特的GIS世界
04-12 4329
vue+mapbox系列教程旨在为开发者提供简单快捷的。在每一个示例中，解释相应的API知识点，做到。
【MAPBOX基础功能】15、mapbox地图事件：点击、移入、移出、解绑
汪同学丶的博客
06-23 4124
mapbox地图事件：点击、移入、移出、解绑
mapbox添加自定义图片绑定点击事件，弹窗为自定义组件
qq_48795482的博客
02-25 664
二、如果需要设置自定义图片作为点位，则要调用loadImage方法加载图片。三、在App.vue中设置取消mapbox默认的弹窗样式。四、弹窗组件通过props接收传过来的属性的值。
Vue Mapbox-GL 在地图中增加图标、线条、标记点击弹窗、地图平移
qq_21138747的博客
01-10 1899
最近正在搞Mapbox-GL地图的一系列东西，按照公司的需求，要做成离线地图（点击这里），然后要在地图的基础上进行增加图标标记，线条连接、弹窗等等需求。ok废话不多，往下看。四、再附上一些可能用到的方法。三、地图点击标记点弹窗。一、在地图上增加图标。最后，react版本。
Mapbox实现拖拽标记点、高亮选中效果、拖拽实现点位置编辑
m0_46394444的博客
04-22 1163
Mapbox实现点图层多点拖动、标记点标记效果，通过监听地图的点击、鼠标移动和鼠标松开事件来实现拖拽操作，根据事件的发生情况更新标记点的位置，并提供了添加新点和取消编辑的功能。
mapbox进阶，仿照百度，加载marker点位，移入marker点切换图标
我哎GIS博客
03-21 283
本文详细介绍如何基于mapbox-gl v3.*.* 版本，仿照百度，加载marker点位，移入marker点切换图标，亲测可用。希望能帮助到您。一起学习，加油！加油！
mapbox进阶，使用七种入场动画加载marker点位
最新发布
我哎GIS博客
04-29 146
本文详细介绍如何基于mapbox-gl v3.*.* 版本，使用七种入场动画加载marker点位，亲测可用。希望能帮助到您。一起学习，加油！加油！
mapbox基础，加载marker点位，测试大数据量加载性能问题
我哎GIS博客
03-20 879
本文详细介绍如何基于mapbox-gl v3.*.* 版本，加载marker点位，测试大数据量加载性能问题，亲测可用。希望能帮助到您。一起学习，加油！加油！
Mapbox 创建可拖动marker
gaoshu28的博客
05-24 1889
Mapbox 创建可拖动marker（Android） mapbox的SDK没提供可拖动的marker，可把我坑惨了，网上找了许多都不能用，应该是因为sdk升级导致的，所以只能自己动手写一个了，这里用的版本是6.1.2： 关于MapView的初始化sdk里介绍的都很详细，这里就不讲了，进入主题： 我们在 mapView.getMapAsync()里： 1.保存MapboxMap实例 2....
Mapbox 创建多个可拖动的标记点
不同场景下的水平居中
04-18 1290
创建可拖动的标记（Marker）
map-box地图点击图标高亮事件
zx960103的博客
10-05 1267
【代码】map-box地图点击图标高亮事件。
vue中使用mapboxGL，并添加marker
CherryLee_1210的博客
08-31 3047
这是主体内容
android mapbox 添加多个点,android – 如何使用MapBox SDK获取标记的点击事件？
weixin_39955233的博客
05-29 542
我使用mapbox sdk提供的名为ItemizedIconOverlay的功能,在mapbox中获得了标记点击事件的解决方案.我做了如下：public void placeGTMarker() {alMarkerGT = new ArrayList();marker = new Marker("my Marker", "", latLng);marker.setMarker(activity.g...
【MapBox】在地图上创建多个Marker点，设置鼠标经过提示信息，单击跳转到链接
「 刘一哥与GIS的故事」
05-18 2361
本文讲述在MapBox地图上创建多个Point点，然后设置鼠标经过每个点提示信息，再让每个点鼠标点击跳转到指定的不同的链接地址。 任务描述： 显示MapBox地图 添加Marker 设置鼠标经过提示 设置Marker单击链接 效果展示： 点击Marker跳转到指定的链接地址。 源码赠送： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>刘一哥与GIS的故事&lt.
mapbox 向地图添加Marker
xm_w_xm的博客
04-15 8485
方法有很多种 一、 var coordinates = document.getElementById("coordinates"); var map = new mapboxgl.Map({ container: "map", style: "mapbox://styles/mapbox/streets-v11", center: [0, 0],...
Mapbox 标记点筛选 vue
不同场景下的水平居中
10-08 464
描述：点击切换 正常/异常，地图上显示不同标记点 效果图： 实现： <template> <div style="height: 100%; width: 100%; text-align: left"> <div ref="basicMapbox" :style="mapSize" class="mapClass"></div> <!-- 点位筛选 --> <div class="lenged_new">
html滚屏点击弹出滚屏相应信息_一个例子，搞懂 Mapbox 地图的点击响应 | 可视化「骚操作」指南...
weixin_39910963的博客
11-28 629
想玩转地图数据可视化？我们需要一些「骚操作」让它更加 Storytelling。不久前的「Mapbox 交互故事地图」零基础 DIY 指南 | 附 27 种交互动画源码教程或许已经帮助你打开一扇窗。那么这篇文章想牵着你的手，我们亲自打开一扇大门 —— 一起实现地图的展示、显示自定义 Marker，加载数据并实现点击 Marker 的响应。Mapbox 办公室位置，完整 Demo：https://d...
vue百度地图标记多个marker和marker点击事件处理
linfeng_meng的博客
11-09 6898
vue百度地图marker
@dragend使用方法
03-20
### @dragend 的功能及使用方法 `@dragend` 是一种常见的事件监听器名称，在不同的框架和场景下可能具有不同含义。以下是基于 Vue 和 Mapbox 场景下的 `@dragend` 功能及其使用方式。 #### 1. **Vue 中的 @dragend** 在 Vue 生态系统中，特别是结合第三方组件库（如 Element UI 或其他表格插件），`@dragend` 常用于检测拖拽操作结束时的行为。例如： - 在引用[2]中的 `<el-table>` 组件中，`@header-dragend` 被用来捕获表头被拖动调整列宽的操作完成时刻[^2]。 这种情况下，`@dragend` 类似于一个自定义事件处理器，当某个特定的拖拽动作完成后会触发回调函数。其基本语法如下： ```html <element @dragend="handleDragEnd"></element> ``` 其中 `handleDragEnd` 是用户定义的一个 JavaScript 方法，负责处理拖拽结束后逻辑。 #### 2. **Mapbox 中的 dragend** 对于地图开发工具 Mapbox 来说，`dragend` 则专门针对地图标记 (Marker) 或者视图本身的移动行为。具体而言，它会在以下情况发生作用： - 当用户停止拖拽 Marker 后触发此事件； - 可以通过绑定 `on('dragend', callback)` 方式来响应该事件并执行相应业务逻辑[^1]。 下面是一个简单的例子展示如何利用 mapbox-gl-js 实现 marker 的拖拽以及相应的事件捕捉机制: ```javascript // 创建一个新的 marker 并将其添加至地图上指定位置 const marker = new mapboxgl.Marker() .setLngLat([longitude, latitude]) .addTo(map); // 添加 'drag' 事件监听器 marker.on('drag', () => { console.log('正在拖拽...'); }); // 添加 'dragstart' 事件监听器 marker.on('dragstart', () => { console.log('开始拖拽'); }); // 添加 'dragend' 事件监听器 marker.on('dragend', () => { const position = marker.getLngLat(); console.log(`拖拽结束，当前位置为 ${position.lng}, ${position.lat}`); }); ``` 上述代码片段展示了完整的 marker 拖拽生命周期管理——从启动 (`dragstart`)、持续过程中 (`drag`) 直到最后释放鼠标按钮时 (`dragend`) 所需采取的动作序列。 --- ### 总结 无论是应用于前端框架还是地理信息系统领域，“dragend” 都扮演着至关重要的角色 —— 它允许开发者精确控制交互流程，并依据最终状态做出进一步决策。理解这些基础概念有助于构建更加互动友好的用户体验界面。
评论 37
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值