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

最新推荐文章于 2025-11-01 17:09:14 发布

自由翱翔碧海蓝

最新推荐文章于 2025-11-01 17:09:14 发布

阅读量625

点赞数 1

CC 4.0 BY-SA版权

文章标签： js

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

js 专栏收录该内容

440 篇文章 ¥59.90 ¥99.00

订阅专栏

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

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

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

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

<!DOCTYPE html>
<html>
<head&

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

自由翱翔碧海蓝

关注关注

1
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

012：Mapbox GL显示弹窗Popup

大剑师兰特的GIS世界

04-16

1379

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

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

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

QgfaClang的博客

09-20

588

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

Mapbox GL：让你的地图动起来

最新发布

ZZZxxA123的博客

11-01

697

还在用会模糊的传统地图？本文零基础友好，用"画画"解释概念，5 分钟画出第一个地图。网约车轨迹、智慧城市大屏都能做，代码超简单，看完就会用！

mapbox添加自定义图片绑定点击事件，弹窗为自定义组件

qq_48795482的博客

02-25

783

二、如果需要设置自定义图片作为点位，则要调用loadImage方法加载图片。三、在App.vue中设置取消mapbox默认的弹窗样式。四、弹窗组件通过props接收传过来的属性的值。

vue中自定义mapbox的弹窗

weixin_43575792的博客

07-23

1619

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

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

ReBeX

01-31

1369

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

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

tigerhhzz的博客

06-14

2042

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

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

tigerhhzz的博客

06-11

4249

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

1917

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

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

不同场景下的水平居中

10-08

5566

方法一：字符串拼接弹框内容：（弹框内容样式少的情况下）效果图：核心代码： 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

1399

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

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

699

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

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

...

11-15

1026

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

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

qq_21138747的博客

01-10

2023

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

mapbox弹窗参数

qq_48795482的博客

03-03

379

试过在弹窗组件中使用自定义按钮，但是给自定义按钮绑定点击事件的时候，突然发现不知道怎么关闭弹窗，尴尬了！解决方法是由之前的设置：maxWidth: "200px",改为maxWidth: "100%"。1、以上是常见参数，今天做项目因为maxWidth属性设置问题，导致弹窗的叉号没有在右侧。3、想实现不同的类型弹窗，有的显示关闭按钮，有的不显示。以上判断了当弹窗内容是视频的时候，才显示关闭按钮。最后只能是在设置弹窗的时候进行判断了。2、修改弹窗关闭按钮颜色。

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

不同场景下的水平居中

10-18

7726

mapbox 一些特殊用法

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

m0_46478007的博客

09-16

6361

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

mapboxgl弹窗 popup

12-28

### 创建和自定义 Mapbox GL JS 的 Popup 弹窗 #### 初始化 Map 和 Popup 组件为了在 Mapbox GL 地图中创建并使用弹窗，首先需要初始化地图实例以及导入必要的库文件。 ```javascript import mapboxgl from 'mapbox-gl'; import 'mapbox-gl/dist/mapbox-gl.css'; // 设置访问令牌 mapboxgl.accessToken = 'your.mapbox.access.token'; // 初始化地图对象 const map = new mapboxgl.Map({ container: 'map', // 容器ID style: 'mapbox://styles/mapbox/streets-v11', center: [-74.5, 40], // 初始中心坐标 zoom: 9 // 缩放级别 }); ``` 当完成上述设置之后，可以继续配置 `Popup` 实例来准备显示内容[^1]。 #### 使用 HTML 内容填充 Popup 通过调用 `.setHTML()` 方法可以直接向弹窗内注入一段简单的 HTML 字符串作为其主体内容： ```javascript let mhtml = '<h3>Hello World</h3><p>This is a custom popup.</p>'; let popup1 = new mapboxgl.Popup().setHTML(mhtml); ``` 这种方式适合于快速构建静态文本或少量富媒体元素的内容展示场景。对于更复杂的交互需求，则推荐采用 Vue.js 或其他前端框架来进行动态渲染[^2]。 #### 结合 Vue.js 自定义 Popup 样式与行为如果希望进一步增强用户体验，可以通过集成 Vue.js 来实现更具灵活性的设计方案。具体做法如下所示： 1. **引入依赖项** ```javascript import Vue from 'vue'; import popupComponent from './popup.vue'; // 假设这是预先编写好的Vue单文件组件路径 ``` 2. **创建新的 Vue 实例并将其实例化后的 DOM 节点传递给 Popup 构造函数** ```javascript const vm = new Vue({ render(h) { return h(popupComponent); // 渲染指定的Vue组件 } }).$mount(); let vueBasedPopup = new mapboxgl.Popup() .setDOMContent(vm.$el) .addTo(map); ``` 这种方法允许开发者利用现代 JavaScript 框架的优势，在不牺牲性能的前提下提供高度可定制化的界面设计选项。 #### 将 Popup 添加至特定位置无论是哪种方式生成的弹窗都需要关联具体的地理位置才能正常工作。这通常涉及到两个方面的工作：一是确定目标地点；二是将该地点绑定到相应的事件处理程序上以便触发弹窗显示逻辑。 ```javascript // 设定经纬度参数 const lngLat = [-74.508, 40.712]; // 向地图添加标记，并为其附加点击监听器以打开弹窗 new mapboxgl.Marker() .setLngLat(lngLat) .addTo(map) .getElement().addEventListener('click', () => { popup1.setLngLat(lngLat).addTo(map); }); ``` 以上就是关于如何基于 Mapbox GL JS 库创建及个性化调整 Popup 弹窗的相关说明[^3]。