使用Mapbox GL实现自定义弹窗效果

最新推荐文章于 2025-05-07 09:52:40 发布

自由翱翔碧海蓝

最新推荐文章于 2025-05-07 09:52:40 发布

阅读量543

点赞数 1

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.youkuaiyun.com/ByteZenith/article/details/132349166

js 专栏收录该内容

440 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了如何使用Mapbox GL创建自定义弹窗效果。通过引入库文件、初始化地图、添加地理要素，结合鼠标事件监听，实现在地图上展示与地理要素相关详细信息的弹窗功能。弹窗内容可根据需求扩展，提供更丰富的数据展示。

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

使用Mapbox GL实现自定义弹窗效果

近年来，随着Web地图应用的普及，展示地理数据的需求越来越多。而Mapbox GL是一款功能强大、易于使用的开源地图库，它提供了丰富的地图渲染和交互功能，使得我们能够轻松创建交互式的地图应用。其中，弹窗（Popup）功能是一个重要的组成部分，它可以在地图上显示与地理要素相关的信息，为用户提供更加详细的数据展示。本文将介绍如何使用Mapbox GL实现自定义弹窗效果。

首先，我们需要在HTML文件中引入Mapbox GL的库文件。代码如下：

<!DOCTYPE html>
<html>

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

自由翱翔碧海蓝

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

012：Mapbox GL显示弹窗Popup

大剑师兰特的GIS世界

04-16

1212

第012个本示例的目的是介绍演示如何在vue+mapbox中显示弹窗。

在Mapbox中使用自定义Vue组件的GIS弹窗

QgfaClang的博客

09-20

545

在上面的代码中，我们首先创建了一个Mapbox地图，并在给定的经度和纬度上设置了初始中心点和缩放级别。然后，我们创建了一个地图弹窗，并将Vue组件的DOM内容设置为弹窗的内容。首先，我们需要创建一个自定义的Vue组件，用于在GIS弹窗中显示内容。在上面的代码中，我们定义了一个简单的弹窗内容组件，它接受两个属性：标题（title）和描述（description）。现在，您可以运行您的Vue应用程序，并在Mapbox地图上看到自定义Vue组件作为GIS弹窗的内容显示了出来。请注意，上面的代码中有一个。

参与评论您还未登录，请先登录后发表或查看评论

vue中自定义mapbox的弹窗

weixin_43575792的博客

07-23

1539

mapbox官网示例中给出的弹窗内容使用的是setHTML事件，可以在事件内写入html代码，但由于项目需求，需要在vue cli中使用弹窗触发事件，这就导致setHTML里面编写的原生事件无法点击使用，所以我们使用新的一个事件setDOMContent，将弹窗内容设置为dom节点,同时也可以使用弹窗的点击事件 1.封装弹窗的内容为一个组件，包括内容，样式，组件需要的数据以及点击的事件,组件名称就叫pop <template> <div> <div>

2025Mapbox零基础入门教程（12）地图标记和弹窗

最新发布

2301_78220461的博客

05-07

301

通过设置draggable属性，可实现标记的拖拽功能，并利用dragend事件获取拖拽后的最新位置。Mapbox的高度封装简化了操作，但了解如何在未封装的情况下实现同样功能对于提升技术能力同样重要。在Mapbox中添加地图标记（marker）的流程包括使用Mapbox GL库中的marker类创建标记，并通过setLngLat方法设置标记的位置。markers类具有丰富的配置选项，包括图标位置、颜色、大小等。Marker默认样式为蓝色，但可通过配置选项进行自定义，如改变颜色、位置、尺寸等。

【WebGIS实例】（13）MapboxGL+Vue3 实现自定义组件地图气泡弹窗 popup

ReBeX

01-31

1261

Mapbox GL JS + Vue3 实现自定义组件地图气泡弹窗 popup

Mapbox 添加弹窗点击标记点出现弹窗 vue

不同场景下的水平居中

10-08

5396

方法一：字符串拼接弹框内容：（弹框内容样式少的情况下）效果图：核心代码： var popup = new mapboxgl.Popup({ offset: 25 }).setHTML(`<div class="makerTop"><h2 class="markerHear" > 综合办一处 </h2></div>' '<div class="markerBody" ><p>设

基于vue3组件实现mapbox-gl的popup弹窗

m0_65461805的博客

06-25

1357

mapbox官网上也有实现popup弹窗的示例，但是有一个弊端，弹窗中的内容不能操作，如：（文本框不能输入内容，按钮不能点击等等）曾看到有基于vue2组件实现popup弹窗，这里不再阐述，自行百度搜索。

从零开始Vue项目中使用MapboxGL开发三维地图教程（四）改变鼠标style、地图置于单击feature中心、量测距离和polgon面积和中心点坐标

tigerhhzz的博客

06-14

1930

该功能使用mapbox gl draw绘制多边形，并使用Turf.js计算其面积（平方米）和中心点坐标。绘制最终顶点时双击以完成多边形。多边形的总面积将显示在地图的左上角。在地图上画一个多边形，并计算多边形中包含的面积和中心点坐标。要删除多边形并绘制新多边形，请使用地图右上角的绘制工具。单击地图上的点来创建线，使用turf测量线的长度距离。这里我们使用到turfjs库，安装并引入turf。单击地图开始绘制多边形。

从零开始Vue项目中使用MapboxGL开发三维地图教程（一）MapboxGL介绍以及前期vue项目的搭建

tigerhhzz的博客

06-11

3871

1、Mapbox-gl简介2、搭建vue项目2.1、创建vue项目2.2、注册mapbox官网2.3、mapbox-gl入门案例3、Mapbox-gl地图主要配置参数说明Mapbox-gl是一个开源、基于webgl技术的前端地图类库。地图数据渲染和可视化这块我们经常用到的有商业使用的如：百度地图API和JS、高德地图的API和JS、ESRI的arcgis的全家桶，同时也有开源的一些地图引擎如：openlayers、mapboxgl、Leaflet等。

从零开始Vue项目中使用MapboxGL开发三维地图教程（三）添加全屏，缩放旋转和比例控制面板以及自定义图标、标记点击弹窗、地图平移等功能

tigerhhzz的博客

06-13

1765

/geojson数据 const geojson = {});${//geojson数据 const geojson = {});//geojson数据 const geojson = {});${//geojson数据 const geojson = {});//geojson数据 const geojson = {});${

从零开始Vue项目中使用MapboxGL开发三维地图教程（二）Mapbox地图样式

tigerhhzz的博客

06-12

2042

Mapbox地图样式：按照Mapbox地图样式规范中描述的模式定义的一个JSON对象，或者是此类JSON的URL。可以接受null值以允许手动添加样式。要从Mapbox API加载样式，可以使用表单的URL其中：owner是您的Mapbox帐户名，：style是样式ID。

mapbox-gl-animated-popup:Mapbox GL JS 的动画弹出组件

08-04

Mapbox GL JS 动画弹出窗口的动画弹出组件 0.2 版需要 Mapbox GL JS 0.48.0 或更高版本。该组件适用于。安装您可以从下载最新版本的 Mapbox GL JS 动画弹出窗口。通过 npm 安装： npm install mapbox-gl-animated-popup --save 使用 CDN： < script src =" https://cdn.jsdelivr.net/npm/mapbox-gl-animated-popup@latest/dist/mapbox-gl-animated-popup.min.js " > </ script > 用法 Mapbox GL JS 动画弹出窗口可与 ES6 模块、纯 JavaScript 和模块加载器一起使用。 Mapbox GL JS 动画弹出需要。将 Mapbox GL JS

[mapbox] popup挂载自定义组件 vue

qq_14993591的博客

12-08

665

pop.vue initMap.js 参考：https://www.jianshu.com/p/9e68e081ab3b

【mapbox】popup挂载自定义组件（Vue3）

...

11-15

935

基本思路：将创建的vue文件制作成一个app，然后把这个app挂载在页面上的一个div上，再把这个div传给mapbox的popup。不知道有没有其他影响，目前用着没问题。

Vue Mapbox-GL 在地图中增加图标、线条、标记点击弹窗、地图平移

qq_21138747的博客

01-10

1877

最近正在搞Mapbox-GL地图的一系列东西，按照公司的需求，要做成离线地图（点击这里），然后要在地图的基础上进行增加图标标记，线条连接、弹窗等等需求。ok废话不多，往下看。四、再附上一些可能用到的方法。三、地图点击标记点弹窗。一、在地图上增加图标。最后，react版本。

Mapbox 移除弹窗、监听弹窗打开、关闭事件、去除Mapbox的logo

不同场景下的水平居中

10-18

7564

mapbox 一些特殊用法

mapbox地图弹窗（popup）使用vue组件，实现弹窗样式轻松自定义化

m0_46478007的博客

09-16

6210

mapbox官方提供的popup，在不要特殊的样式的时候，我们按照官方的实例去添加，setHTML的内容只能原生的html,要修改样式就要用内联样式，，最主要在操作弹窗内部dom元素方便存在很大的不便性，现在我们将弹窗的内容写到vue组件里，然后挂载到popup,这样不仅能轻松定义样式，而且使用Vue指令

页面1、mapbox添加自定义图片marker标记点和气泡弹窗

u012612234的博客

06-28

4476

mapbox地图自定义marker标记点图片，点击标记点图标弹出自定义样式的气泡弹窗

mapboxgl弹窗 popup

12-28

### 创建和自定义 Mapbox GL JS 的 Popup 弹窗 #### 初始化 Map 和 Popup 组件为了在 Mapbox GL 地图中创建并使用弹窗，首先需要初始化地图实例以及导入必要的库文件。 ```javascript import mapboxgl from '...