如何将Google Places详情输出到JSON文件？代码问题求助

为什么控制台无输出？ #

原代码中new google.maps.places.PlacesService()初始化时未传入有效的DOM容器，PlacesService API要求必须绑定一个地图元素（哪怕是隐藏的）才能发起请求，否则服务初始化失败，getDetails的回调函数不会执行，导致既无输出也无报错。

修复方案与完整实现 #

以下代码解决了无输出问题，同时实现了收集所有地点数据并导出为JSON文件的需求：

<!DOCTYPE html>
<html>
<head>
    <title>Places Data Exporter</title>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&key=你的API密钥"></script>
</head>
<body>
    <!-- 隐藏容器，用于初始化PlacesService -->
    <div id="hidden-map" style="display: none;"></div>
    <button onclick="startCollection()">开始收集数据</button>

    <script>
        const placeIds = [
            {"placeid": "ChIJryijc9s0K4gRG9aU7SDTXdA"},
            {"placeid": "ChIJaZ6Hg4iAhYARxTsHnDFJ9zE"},
            {"placeid": "ChIJl64IQXrYzUwR8CVOTRf_h3o"},
            {"placeid": "ChIJBTMkuph-zkwR9oEF8Nv3Z0o"},
            {"placeid": "ChIJ4QbSBj8IzkwRGi0ILu03_VA"},
            {"placeid": "ChIJc2nSALkEdkgRkuoJJBfzkUI"},
            {"placeid": "ChIJmzrzi9Y0K4gRgXUc3sTY7RU"}
        ];

        let collectedData = [];
        let completedRequests = 0;

        function startCollection() {
            collectedData = [];
            completedRequests = 0;
            // 绑定隐藏容器初始化PlacesService
            const placesService = new google.maps.places.PlacesService(document.getElementById('hidden-map'));
            
            placeIds.forEach(item => fetchPlaceDetails(placesService, item.placeid));
        }

        function fetchPlaceDetails(service, placeId) {
            service.getDetails({ placeId }, (result, status) => {
                completedRequests++;
                
                if (status !== google.maps.places.PlacesServiceStatus.OK) {
                    console.error(`获取地点${placeId}失败: ${status}`);
                    checkAndExport();
                    return;
                }

                // 输出地点名称到控制台
                console.log('地点名称:', result.name);
                // 收集需要的字段，可按需扩展
                collectedData.push({
                    placeId,
                    name: result.name,
                    address: result.formatted_address,
                    location: {
                        lat: result.geometry.location.lat(),
                        lng: result.geometry.location.lng()
                    },
                    phone: result.formatted_phone_number,
                    rating: result.rating
                });

                checkAndExport();
            });
        }

        function checkAndExport() {
            // 所有请求完成后导出JSON
            if (completedRequests === placeIds.length) {
                // 使用JSON.stringify将JS数组转为标准JSON字符串
                const jsonStr = JSON.stringify(collectedData, null, 2);
                console.log('完整数据:', jsonStr);
                
                // 自动下载JSON文件
                downloadFile(jsonStr, 'places-data.json', 'application/json');
            }
        }

        // 文件下载工具函数
        function downloadFile(content, filename, contentType) {
            const blob = new Blob([content], { type: contentType });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }
    </script>
</body>
</html>

关键细节说明 #

• PlacesService初始化：必须传入DOM元素（这里用了隐藏的div），否则API无法正常工作，这是原代码的核心问题。
• JSON.stringify的必要性：必须用它将JavaScript对象/数组转换为标准JSON格式字符串，才能生成可导入地图的JSON文件。第二个参数null、第三个参数2用于格式化输出，提升可读性。
• 异步请求处理：getDetails是异步请求，通过计数器跟踪所有请求的完成状态，确保所有数据收集完毕后再执行导出操作。
• 数据自定义：在fetchPlaceDetails中可以按需筛选需要的字段，避免导出冗余数据。

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