自定义Google Maps信息窗口内容：优化样式与代码实现求助

我完全懂你折腾三周的崩溃！你的信息窗口之所以出现内容溢出、大片空白的问题，核心是HTML结构错误+样式未正确控制，咱们一步步把它改成规整的迷你页面风格，同时让编写内容变得轻松。

先说说原代码的核心问题 #

• HTML字符串拼接时出现语法错误（比如闭合标签写成</div &gt;，还有多余的引号）
• 浮动元素没有清除，导致面板容器高度塌陷，内容跑出蓝色区域
• 经纬度和自定义面板的拼接逻辑混乱，破坏了布局结构

解决方案：用模板字符串简化编写+修复布局 #

原生JS版本（无需jQuery，更轻量） #

把信息窗口的HTML内容用ES6模板字符串来写，可读性拉满，再也不用拼字符串了：

<div id="map" style="width:100%; height:400px;"></div>

<script>
function myMap() {
    // 用模板字符串编写信息窗口内容，像写普通HTML一样！
    const infoWindowTemplate = (lat, lng) => `
        <div class="panel panel-info" style="width:auto; min-height:134px;">
            <div class="panel-heading text-center">Sign Information</div>
            <div class="panel-body">
                <!-- 经纬度区域 -->
                <div style="width:50%; float:left;">
                    <p>Latitude: ${lat}</p>
                    <p>Longitude: ${lng}</p>
                </div>
                <!-- 右侧内容区域 -->
                <div style="width:50%; float:right;">
                    <div class="k-content" style="width:200px;">
                        <!-- 这里可以加图片、文字等内容 -->
                        <img src="你的图片URL" alt="示例图片" style="width:100%;">
                        <p>这里是自定义内容</p>
                    </div>
                </div>
                <!-- 清除浮动，防止面板高度塌陷 -->
                <div style="clear:both;"></div>
            </div>
        </div>
    `;

    const myCenter = new google.maps.LatLng(33.367302, -88.322125);
    const mapCanvas = document.getElementById("map");
    const mapOptions = { center: myCenter, zoom: 6 };
    const map = new google.maps.Map(mapCanvas, mapOptions);

    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(map, event.latLng);
    });

    function placeMarker(map, location) {
        const marker = new google.maps.Marker({
            position: location,
            map: map
        });
        // 传入经纬度生成完整的信息窗口内容
        const infowindow = new google.maps.InfoWindow({
            content: infoWindowTemplate(location.lat(), location.lng())
        });
        infowindow.open(map, marker);
    }
}
</script>

如果你想用jQuery简化（比如动态修改内容） #

如果需要更灵活的DOM操作，可以用jQuery来构建信息窗口内容：

<div id="map" style="width:100%; height:400px;"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function myMap() {
    const myCenter = new google.maps.LatLng(33.367302, -88.322125);
    const mapCanvas = document.getElementById("map");
    const mapOptions = { center: myCenter, zoom: 6 };
    const map = new google.maps.Map(mapCanvas, mapOptions);

    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(map, event.latLng);
    });

    function placeMarker(map, location) {
        const marker = new google.maps.Marker({
            position: location,
            map: map
        });

        // 用jQuery构建DOM元素
        const infoPanel = $('<div class="panel panel-info" style="width:auto; min-height:134px;">')
            .append($('<div class="panel-heading text-center">').text('Sign Information'))
            .append($('<div class="panel-body">')
                .append($('<div style="width:50%; float:left;">')
                    .append($('<p>').text(`Latitude: ${location.lat()}`))
                    .append($('<p>').text(`Longitude: ${location.lng()}`))
                )
                .append($('<div style="width:50%; float:right;">')
                    .append($('<div class="k-content" style="width:200px;">')
                        .append($('<img>', {src: '你的图片URL', alt: '示例图片', style: 'width:100%;'}))
                        .append($('<p>').text('这里是自定义内容'))
                    )
                )
                .append($('<div style="clear:both;"></div>')) // 清除浮动
            );

        const infowindow = new google.maps.InfoWindow({
            content: infoPanel[0] // 把jQuery对象转成原生DOM元素
        });
        infowindow.open(map, marker);
    }
}
</script>

关键修改点说明 #

1. 用模板字符串/JQuery代替字符串拼接：直接写HTML结构，再也不用手动拼+和转义标签，大幅降低编写难度
2. 修复HTML语法错误：修正了错误的闭合标签，移除多余引号
3. 清除浮动：添加<div style="clear:both;"></div>解决面板高度塌陷问题，确保所有内容都在蓝色面板内
4. 规整内容嵌套：把经纬度和自定义内容都放在panel-body里，布局更清晰

现在你的信息窗口会完美呈现迷你HTML页面的效果，图片、文字都会乖乖待在蓝色面板里啦！

内容的提问来源于stack exchange，提问作者Cobaltsfive