显示弹出窗口

在地图上显示弹出窗口;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>显示弹出窗口</title>
    <meta property="og:description" content="在地图上显示弹出窗口" />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
        
        .coordinate-info {
            background: rgba(255, 255, 255, 0.8);
            padding: 10px;
            margin: 0;
            font-family: Arial, sans-serif;
            line-height: 1.5;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
        center: [0, 0],
        zoom: 2
    });

    // 示例1：基本弹出窗口 - 带有固定文本
    const popup1 = new maplibregl.Popup({ closeOnClick: false })
        .setLngLat([-50, 30])
        .setHTML('<h3>基本弹出窗口</h3><p>这是一个简单的弹出窗口，带有HTML内容。</p>')
        .addTo(map);

    // 示例2：自定义样式弹出窗口
    const popup2 = new maplibregl.Popup({
        closeButton: false,
        closeOnClick: false,
        className: 'custom-popup' // 可以添加自定义CSS类
    })
        .setLngLat([50, 30])
        .setHTML('<h3>自定义样式弹出窗口</h3><p>此弹出窗口没有关闭按钮。</p>')
        .addTo(map);

    // 示例3：点击地图显示坐标的弹出窗口
    map.on('click', (e) => {
        // 获取点击位置的坐标
        const clickLng = e.lngLat.lng.toFixed(4);
        const clickLat = e.lngLat.lat.toFixed(4);
        
        // 创建一个包含坐标信息的HTML内容
        const html = `
            <div class="coordinate-info">
                <h3>点击位置坐标</h3>
                <p>
                    经度: ${clickLng}<br>
                    纬度: ${clickLat}
                </p>
            </div>
        `;
        
        // 创建并显示弹出窗口
        new maplibregl.Popup()
            .setLngLat(e.lngLat)
            .setHTML(html)
            .addTo(map);
    });

    // 添加导航控件
    map.addControl(new maplibregl.NavigationControl());

    // 添加说明弹出窗口
    map.on('load', () => {
        new maplibregl.Popup({
            closeOnClick: false,
            anchor: 'bottom-left'
        })
            .setLngLat([0, 0])
            .setHTML(`
                <h3>弹出窗口示例</h3>
                <p>本示例展示了不同类型的弹出窗口：</p>
                <ul>
                    <li>两个静态弹出窗口：一个在左侧，一个在右侧</li>
                    <li>点击地图任意位置可显示带坐标信息的弹出窗口</li>
                </ul>
            `)
            .addTo(map);
    });
</script>
</body>
</html>