在Google Maps API中使用本地PHP返回的JSON并解决Feature获取报错问题

看起来你遇到的核心问题是异步加载的顺序冲突，加上可能的PHP响应配置问题，导致无法正确获取地图要素并更新属性。咱们一步步来解决：

一、最关键的问题：异步操作的执行顺序 #

map.data.loadGeoJson()是异步方法——它不会等待GeoJSON文件加载完成才继续执行后面的代码。而你的XHR请求也是异步的，这就可能出现一种情况：XHR请求先拿到了PHP返回的JSON数据，但此时地图的GeoJSON要素还没加载完毕，map.data.getFeatureById(stationName)自然找不到对应的要素，返回undefined，进而触发Cannot read property 'setProperty'的错误。

修复方案：把数据请求放到GeoJSON加载完成的回调里 #

修改loadGeoJson的调用，加上回调函数，确保只有当地图要素加载完成后，才发起PHP数据请求：

function showStation(crimeType) { 
  var map; 
  map = new google.maps.Map(document.getElementById('map'),{ 
    zoom:9, 
    center: {lat: 32.815939, lng: 73.305297} 
  }); 

  // 把loadGeoJson改成带回调的形式，确保要素加载完成后再处理数据
  map.data.loadGeoJson('stations.js', { idPropertyName: 'name' }, function() {
    // 这里才发起PHP数据请求
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', './data/stationdata.php', true); 
    
    xhr.onload = function() { 
      // 先检查请求是否成功
      if (xhr.status === 200) {
        try {
          var crimeData = JSON.parse(xhr.responseText); 
          crimeData.forEach(function(row){ 
            var crimeVariable = row[crimeType]; 
            var stationName = row.stationName; 
            
            var feature = map.data.getFeatureById(stationName);
            if (feature) { // 先判断要素是否存在，避免报错
              feature.setProperty(crimeType, crimeVariable); 
            } else {
              console.warn(`找不到名为${stationName}的地图要素`);
            }
          }); 
        } catch(e) {
          console.error('JSON解析错误:', e);
        }
      } else {
        console.error(`请求失败，状态码：${xhr.status}`);
      }
    };

    // 处理请求错误的情况
    xhr.onerror = function() {
      console.error('请求stationdata.php时发生网络错误');
    };

    xhr.send(); 
  }); 

  map.data.setStyle(styleFeature); 
}

二、检查PHP文件的响应配置 #

确保你的stationdata.php返回正确的HTTP响应头，否则可能导致JSON解析异常：
在PHP文件的最顶部添加以下代码，设置正确的Content-Type：

<?php
header('Content-Type: application/json; charset=utf-8');
// 你的数据库查询和JSON输出代码...
?>

另外，确认./data/stationdata.php的路径是正确的——可以打开浏览器的开发者工具（F12），切换到Network标签，查看这个请求的状态码：如果是404，说明路径错误；如果是200，再看Response里的内容是否是正确的JSON格式。

三、额外的调试建议 #

• 在浏览器控制台的Network标签，检查stationdata.php的请求是否成功，返回的JSON是否和你提供的一致。
• 在map.data.loadGeoJson的回调里，可以先打印map.data.getFeatures()，确认所有要素都已经加载完毕。

这样调整后，应该就能解决你遇到的两个错误了。

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