MapLibre GL JS第64课：将弹窗附加到标记

📌 学习目标

掌握将弹窗附加到标记的实现方法
理解相关API的使用
能够独立完成类似功能开发

🎯 核心概念

将弹窗附加到标记实例。

💻 完整代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Attach a popup to a marker instance</title>
    <meta property="og:description" content="将弹出框附加到标记上并在点击时显示。" />
    <meta property="og:created" content="2006-06-25" />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
<style>
    #marker {
        background-image: url('https://maplibre.org/maplibre-gl-js/docs/assets/washington-monument.jpg');
        background-size: cover;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
    }

    .maplibregl-popup {
        max-width: 200px;
    }
</style>

<div id="map"></div>

<script>
    const monument = [-77.0353, 38.8895];
    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://demotiles.maplibre.org/style.json',
        center: monument,
        zoom: 5
    });

    // 创建弹窗
    const popup = new maplibregl.Popup({offset: 25}).setText(
        'Construction on the Washington Monument began in 1848.'
    );

    // 为标记创建DOM元素
    const el = document.createElement('div');
    el.id = 'marker';

    // 创建标记
    new maplibregl.Marker({element: el})
        .setLngLat(monument)
        .setPopup(popup) // 在此标记上设置弹窗
        .addTo(map);
</script>
</body>
</html>

🔍 代码解析

1. 初始化地图

使用 new maplibregl.Map() 创建地图实例，配置了华盛顿纪念碑位置作为初始视图。

2. 关键配置项

new maplibregl.Popup(): 创建弹窗实例
setText(): 设置弹窗文本内容
offset: 设置弹窗相对于标记的偏移量
setPopup(): 将弹窗附加到标记
自定义element: 创建自定义标记元素

⚙️ 参数说明

参数	类型	必填	说明
offset	number/array	否	弹窗偏移量，默认 $0, 0$
closeButton	boolean	否	是否显示关闭按钮，默认true
closeOnClick	boolean	否	点击地图时关闭弹窗，默认true
element	HTMLElement	否	自定义标记元素

🎨 效果说明

运行代码后，地图显示华盛顿特区区域，在华盛顿纪念碑位置显示一个自定义图片标记。点击标记时弹出信息窗口，显示关于华盛顿纪念碑的建造信息。标记使用华盛顿纪念碑的缩略图作为图标。

💡 常见问题

Q1: 弹窗没有显示？

A: 检查以下几点：

确认弹窗已通过 setPopup() 附加到标记
确认标记已添加到地图
检查弹窗内容是否为空

Q2: 如何自定义弹窗内容？

A: 使用setHTML()方法设置HTML内容：

javascript 复制代码

const popup = new maplibregl.Popup({offset: 25}).setHTML(
    '<h3>华盛顿纪念碑</h3>' +
    '<p>Construction began in 1848.</p>' +
    '<img src="monument.jpg" alt="Monument" />'
);

Q3: 如何手动控制弹窗显示/隐藏？

A: 使用togglePopup()或直接调用popup的方法：