技术问询：如何通过Google Maps API结合JSON数据实现可编辑图形

没问题！我帮你整理了一个完整的实现方案，不仅包含你现有的可编辑矩形功能，还加入了JSON数据的加载、图形编辑后的同步更新，以及导出JSON的功能，这样你可以轻松管理地图上的可编辑图形。

完整HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <title>可编辑地图图形 + JSON 管理</title>
    <style>
        #map {
            height: 600px;
            width: 100%;
        }
        .controls {
            margin: 20px;
            padding: 10px;
        }
        #json-output {
            margin-top: 10px;
            width: 100%;
            height: 200px;
            padding: 10px;
            border: 1px solid #ccc;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <div class="controls">
        <button onclick="saveToJSON()">保存当前图形为JSON</button>
        <div id="json-output"></div>
    </div>
    <div id="map"></div>

    <script>
        // 预设的JSON图形数据（你可以从后端加载这个数据）
        const initialShapesJSON = [
            {
                type: "rectangle",
                bounds: {
                    north: 44.599,
                    south: 44.490,
                    east: -78.443,
                    west: -78.649
                },
                editable: true,
                fillColor: "#FF0000",
                fillOpacity: 0.3
            },
            {
                type: "polygon",
                paths: [
                    {lat: 44.55, lng: -78.5},
                    {lat: 44.57, lng: -78.45},
                    {lat: 44.53, lng: -78.42}
                ],
                editable: true,
                fillColor: "#00FF00",
                fillOpacity: 0.3
            }
        ];

        let map;
        let mapShapes = []; // 存储地图上的图形实例

        function initMap() {
            // 初始化地图
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 44.5452, lng: -78.5389},
                zoom: 9
            });

            // 从JSON加载图形到地图
            loadShapesFromJSON(initialShapesJSON);
        }

        // 从JSON数据创建地图图形
        function loadShapesFromJSON(jsonData) {
            jsonData.forEach(shapeData => {
                let shape;
                switch(shapeData.type) {
                    case "rectangle":
                        shape = new google.maps.Rectangle({
                            bounds: shapeData.bounds,
                            editable: shapeData.editable,
                            fillColor: shapeData.fillColor,
                            fillOpacity: shapeData.fillOpacity,
                            map: map
                        });
                        // 监听矩形边界变化事件，同步更新数据
                        shape.addListener('bounds_changed', () => {
                            updateShapeData(shape);
                        });
                        break;
                    case "polygon":
                        shape = new google.maps.Polygon({
                            paths: shapeData.paths,
                            editable: shapeData.editable,
                            fillColor: shapeData.fillColor,
                            fillOpacity: shapeData.fillOpacity,
                            map: map
                        });
                        // 监听多边形路径变化事件，同步更新数据
                        shape.addListener('path_changed', () => {
                            updateShapeData(shape);
                        });
                        break;
                    // 可以扩展支持其他图形类型，比如圆形
                }
                // 把图形实例和它的原始数据关联起来
                shape.shapeData = shapeData;
                mapShapes.push(shape);
            });
        }

        // 更新图形对应的JSON数据
        function updateShapeData(shape) {
            if(shape.shapeData.type === "rectangle") {
                const bounds = shape.getBounds();
                shape.shapeData.bounds = {
                    north: bounds.getNorthEast().lat(),
                    south: bounds.getSouthWest().lat(),
                    east: bounds.getNorthEast().lng(),
                    west: bounds.getSouthWest().lng()
                };
            } else if(shape.shapeData.type === "polygon") {
                const paths = shape.getPath().getArray();
                shape.shapeData.paths = paths.map(point => ({
                    lat: point.lat(),
                    lng: point.lng()
                }));
            }
            // 实时更新显示的JSON
            displayCurrentJSON();
        }

        // 保存当前所有图形为JSON并显示
        function saveToJSON() {
            const currentJSON = mapShapes.map(shape => shape.shapeData);
            const jsonString = JSON.stringify(currentJSON, null, 2);
            document.getElementById('json-output').value = jsonString;
            // 这里可以添加把JSON发送到后端的逻辑，比如：
            // fetch('/save-shapes', {
            //     method: 'POST',
            //     headers: {'Content-Type': 'application/json'},
            //     body: jsonString
            // });
        }

        // 实时显示当前图形的JSON数据
        function displayCurrentJSON() {
            const currentJSON = mapShapes.map(shape => shape.shapeData);
            document.getElementById('json-output').value = JSON.stringify(currentJSON, null, 2);
        }
    </script>

    <!-- 替换成你自己的Google Maps API密钥 -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>

关键功能说明 #

• JSON数据驱动: 预设的initialShapesJSON定义了地图上的初始图形，你可以从后端接口加载这个数据，实现图形的持久化存储
• 可编辑图形: 所有图形都设置了editable: true，你可以拖动图形的控制点来修改形状
• 实时数据同步: 当你编辑图形时，bounds_changed（矩形）或path_changed（多边形）事件会触发，自动更新对应的JSON数据
• 导出JSON: 点击「保存当前图形为JSON」按钮，可以把当前所有图形的状态导出为格式化的JSON，你可以把这个JSON发送到后端保存

使用注意事项 #

1. 替换代码中的YOUR_API_KEY为你自己的Google Maps API密钥（需要在Google Cloud控制台启用Maps JavaScript API）
2. 可以扩展支持更多图形类型（比如圆形），只需要在loadShapesFromJSON函数中添加对应的case逻辑
3. 如果需要从后端加载图形数据，把initialShapesJSON替换为通过fetch获取的数据即可

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