Google 地图 - 信息窗口

Google Maps - 使用信息窗口（InfoWindow）

信息窗口（InfoWindow）在地图上方的一个弹出窗口中显示内容（通常是文本或图像），通常锚定到特定的位置或标记。它们通常用于在用户与兴趣点（例如，点击标记）交互时提供详细信息。

创建信息窗口（InfoWindow）

您可以通过实例化 google.maps.InfoWindow 类来创建 InfoWindow。其构造函数接受一个 InfoWindowOptions 对象。

主要的信息窗口（InfoWindow）选项：

content: 要显示的内容。这可以是 HTML 字符串（例如，'<h3>标题</h3><p>详情...</p>'）或一个 DOM Node。
position: 一个 LatLng 对象或字面量（{lat: ..., lng: ...}），用于指定 InfoWindow 在未附加到标记时应锚定的位置。
pixelOffset: 一个 google.maps.Size 对象，用于指定 InfoWindow 的锚点到其显示位置的偏移量（以像素为单位）。
maxWidth: InfoWindow 的最大宽度，以像素为单位。如果内容超出此宽度，将进行换行。
ariaLabel: 为屏幕阅读器提供文本标签，提高可访问性，特别是在内容复杂或基于图像时。

示例：创建一个简单的信息窗口（InfoWindow）

// 确保 InfoWindow 已导入：const { InfoWindow } = await google.maps.importLibrary("maps");

const infoContent = `
    <div style="font-family: sans-serif;">
        <h4>朱比利山庄，海得拉巴</h4>
        <p>一个著名的住宅和商业区。</p>
        <a href="#" target="_blank">更多信息...</a>
    </div>`;

const infowindow = new google.maps.InfoWindow({
    content: infoContent,
    maxWidth: 250, // 限制宽度
    ariaLabel: 'Jubilee Hills Information'
});

打开信息窗口（InfoWindow）

创建 InfoWindow 不会自动显示它。您需要调用其 open() 方法。

现代语法（推荐）：

推荐的 open 方法接受一个对象参数：

infowindow.open({
    map: map,           // 要显示在哪个地图实例上
    anchor: marker,     // 可选：要锚定到的标记
    // position: latLng  // 可选：如果未锚定到标记，则使用此项
    shouldFocus: false  // 可选：如果为 true，则阻止地图平移以适应窗口
});

与标记关联时，通常优先使用 anchor 选项，因为它会自动处理定位，即使标记图标发生变化。

旧语法：

较旧的语法 infowindow.open(map, marker); 仍然可用，但灵活性较低。

常见用例：在标记点击时打开

这结合了创建标记、创建 InfoWindow 以及为标记添加点击事件监听器来打开窗口的步骤。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>InfoWindow on Marker Click</title>
    <style>#map { height: 400px; width: 100%; } html, body { height: 100%; margin: 0; padding: 0; }</style>
</head>
<body>
    <div id="map"></div>
    <script>
        let currentInfoWindow = null; // 跟踪当前打开的 InfoWindow

        async function initMap() {
            const mapCenter = { lat: 17.4330, lng: 78.4121 }; // 朱比利山庄区域
            const { Map, InfoWindow } = await google.maps.importLibrary("maps");
            const { Marker } = await google.maps.importLibrary("marker");

            const map = new Map(document.getElementById("map"), {
                zoom: 14,
                center: mapCenter,
                mapId: "DEMO_MAP_ID"
            });

            // 创建标记
            const marker = new Marker({
                position: mapCenter,
                map: map,
                title: 'Jubilee Hills',
                // 可选：使用自定义图标
                // icon: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png'
            });

            // 创建 InfoWindow（可以重复使用或为每个标记创建）
            const infoContent = `
                <div>
                    **朱比利山庄**<br>
                    海得拉巴，特伦甘纳邦<br>
                    印度-500033
                </div>`;
            const infowindow = new InfoWindow({
                content: infoContent,
                maxWidth: 200,
                ariaLabel: 'Jubilee Hills Location'
            });

            // 为标记添加点击事件监听器
            marker.addListener('click', () => {
                // 关闭之前打开的 InfoWindow（如果有）
                if (currentInfoWindow) {
                    currentInfoWindow.close();
                }
                // 打开新的 InfoWindow
                infowindow.open({ anchor: marker, map });
                currentInfoWindow = infowindow; // 跟踪当前窗口
            });

            // 如果点击地图其他位置则关闭 InfoWindow
            map.addListener('click', () => {
                 if (currentInfoWindow) {
                    currentInfoWindow.close();
                    currentInfoWindow = null;
                }
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker,maps" async defer></script>
</body>
</html>

预期输出：一张以海得拉巴朱比利山庄附近为中心的地图，上面有一个标记。点击标记将打开一个 InfoWindow，显示地址详情。点击地图上的其他位置将关闭 InfoWindow。

关闭信息窗口（InfoWindow）

您可以使用 InfoWindow 的 close() 方法通过编程方式将其关闭。

infowindow.close();

关闭任何当前打开的 InfoWindow 后再打开新的 InfoWindow 是一个好习惯，特别是当您有多个标记时，这样做可以避免界面混乱。

信息窗口（InfoWindow）事件

InfoWindow 也会触发事件：

closeclick: 当用户点击关闭按钮（右上角的 ‘x’）时触发。
content_changed: 当 content 属性改变时触发。
domready: 当 InfoWindow 的内容（DOM 结构）准备好进行交互时触发（如果您的内容包含需要附加事件监听器的元素，这会很有用）。

示例：监听关闭点击事件

infowindow.addListener('closeclick', () => {
    console.log('InfoWindow closed by user.');
    // 如有需要，执行清理或更新状态操作
    currentInfoWindow = null; // 更新跟踪变量
});