单击时展开mapbox弹出窗口

基础概念

Mapbox 是一个开源的地图平台，提供了丰富的地图样式和交互功能。弹出窗口（Popup）是 Mapbox 中的一个组件，用于在地图上显示额外的信息。用户可以通过单击地图上的某个点来展开弹出窗口，显示该点的详细信息。

类型

Mapbox 弹出窗口主要有以下几种类型：

基本弹出窗口：显示简单的文本和 HTML 内容。
自定义标记弹出窗口：与自定义标记结合使用，显示更复杂的信息。
图片弹出窗口：可以嵌入图片，提供更丰富的视觉效果。

应用场景

地图标注：在地图上标注特定地点，并通过弹出窗口显示详细信息。
数据可视化：将数据点显示在地图上，并通过弹出窗口展示详细数据。
导航应用：在导航过程中，通过弹出窗口显示路线信息和目的地详情。

示例代码

以下是一个简单的示例代码，展示如何在 Mapbox 中实现单击时展开弹出窗口：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Mapbox Popup Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css" rel="stylesheet" />
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-74.5, 40],
        zoom: 9
    });

    map.on('load', function () {
        map.addSource('single-point', {
            type: 'geojson',
            data: {
                type: 'FeatureCollection',
                features: [{
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: [-74.5, 40]
                    },
                    properties: {
                        title: 'New York City',
                        description: 'The Big Apple'
                    }
                }]
            }
        });

        map.addLayer({
            id: 'point',
            type: 'circle',
            source: 'single-point',
            paint: {
                'circle-radius': 10,
                'circle-color': '#007cbf'
            }
        });

        map.on('click', 'point', function (e) {
            const coordinates = e.features[0].geometry.coordinates.slice();
            const properties = e.features[0].properties;

            new mapboxgl.Popup()
                .setLngLat(coordinates)
                .setHTML(`<h3>${properties.title}</h3><p>${properties.description}</p>`)
                .addTo(map);
        });
    });
</script>
</body>
</html>