如何在Google Maps中创建多个带InfoWindow的矩形？代码位置指引

嘿，我来帮你解决这个问题！你现在的代码只显示一个矩形，核心原因是只从数据库里取了一行数据，而且没有循环创建多个矩形和对应的弹窗。下面我给你调整后的完整代码，一步步解释怎么实现多个矩形和各自的InfoWindow：

关键改动说明 #

1. 获取所有数据库数据：不再只取一行，而是把map表中所有的区域数据都取出来，转成JSON格式传给前端JS
2. 循环创建矩形与弹窗：遍历所有区域数据，为每个区域单独创建矩形和对应的InfoWindow，用let（块级作用域）避免弹窗内容复用最后一条数据的问题
3. 分离PHP与JS逻辑：把数据传递和视图创建分开，代码更清晰易维护

完整代码示例 #

整合后的HTML+PHP+JS代码

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>多矩形地图展示</title>
    <style>
        #map { height: 100%; }
        html, body { height: 100%; margin: 0; padding: 0; }
    </style>
</head>
<body>
    <div id="map"></div>
    <!-- 注意替换成你自己的Google Maps API Key -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initMap"></script>
    <script>
        // 从PHP获取所有区域数据
        const regionData = <?php
            $con = mysqli_connect("localhost","root","","test");
            // 确保数据库连接正常
            if (!$con) {
                die("数据库连接失败: " . mysqli_connect_error());
            }
            $query = mysqli_query($con,"SELECT * FROM map");
            // 取出所有数据并转成关联数组
            $regions = mysqli_fetch_all($query, MYSQLI_ASSOC);
            // 转成JSON格式传给JS
            echo json_encode($regions);
            mysqli_close($con);
        ?>;

        function initMap() {
            // 初始化地图
            const map = new google.maps.Map(document.getElementById('map'), {
                zoom: 5,
                center: {lat: 37.0924, lng: -119.4179324},
                mapTypeId: 'terrain'
            });

            // 遍历每个区域数据，创建矩形和对应弹窗
            regionData.forEach(region => {
                // 为当前区域生成专属弹窗内容（可根据数据库字段自定义）
                const contentString = `<div id="content">
                    <p><b>区域信息</b><br>
                    东北坐标: ${region.nelat}, ${region.nelng}<br>
                    西南坐标: ${region.swlat}, ${region.swlng}</p>
                </div>`;
                
                // 创建当前区域的InfoWindow
                const infowindow = new google.maps.InfoWindow({
                    content: contentString
                });

                // 创建当前区域的矩形
                const rectangle = new google.maps.Rectangle({
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#FF0000',
                    fillOpacity: 0.35,
                    map: map,
                    bounds: new google.maps.LatLngBounds(
                        new google.maps.LatLng(region.nelat, region.nelng),
                        new google.maps.LatLng(region.swlat, region.swlng)
                    ),
                });

                // 给矩形绑定点击事件，打开对应弹窗
                rectangle.addListener('click', () => {
                    infowindow.open(map, rectangle);
                });
            });
        }
    </script>
</body>
</html>

细节注意点 #

• API密钥替换：记得把代码里的你的API密钥换成你自己的Google Maps API密钥
• 自定义弹窗内容：如果你的map表中有区域名称、描述等字段，可以在contentString里用${region.字段名}插入对应内容
• 个性化样式：如果需要给不同区域设置不同颜色，只需要在循环里根据区域数据动态修改strokeColor和fillColor即可
• 数据库安全：实际项目中不要用root账号直接连接数据库，建议创建专用数据库用户，避免硬编码密码

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