Google Maps API加载多外部GeoJSON并差异化渲染多边形问题

问题根源分析 #

你的代码存在三个核心问题：

• map.data.loadGeoJson()是异步加载方法，返回的是DataFeatureCollection而非多边形路径数组，直接把它传给google.maps.Polygon的path参数，必然触发InvalidValueError: not an Array错误。
• 你同时使用了map.data.loadGeoJson()（将数据加载到Google Maps内置的Data图层）和手动创建google.maps.Polygon，导致图层叠加，Data图层的默认样式（黑色描边、半透明填充）覆盖了自定义样式。
• this.pathmsoa的上下文错误，当前作用域下this并不指向你定义的pathmsoa变量，进一步导致path参数无效。

解决方案1：使用map.data图层（推荐） #

利用Google Maps的map.data图层加载GeoJSON，通过自定义属性区分数据源，再设置差异化样式：

// 加载MSOA数据并添加标识属性
map.data.loadGeoJson("msoa.json", null, function(features) {
  features.forEach(feature => feature.setProperty('layer', 'msoa'));
});

// 加载LSOA数据并添加标识属性
map.data.loadGeoJson("lsoa.json", null, function(features) {
  features.forEach(feature => feature.setProperty('layer', 'lsoa'));
});

// 统一设置样式回调，按标识区分样式
map.data.setStyle(function(feature) {
  const layer = feature.getProperty('layer');
  if (layer === 'msoa') {
    return {
      strokeColor: '#ffffff',
      strokeOpacity: 0.5,
      strokeWeight: 2,
      fillColor: '#800105',
      fillOpacity: 0.1
    };
  } else if (layer === 'lsoa') {
    return {
      strokeColor: '#ff0000',
      strokeOpacity: 0.5,
      strokeWeight: 1,
      fillColor: '#800105',
      fillOpacity: 0.8
    };
  }
  return {};
});

解决方案2：手动加载GeoJSON并创建Polygon #

如果需要完全手动控制Polygon实例，使用fetch异步加载并解析GeoJSON：

// 加载并渲染MSOA多边形
fetch("msoa.json")
  .then(res => res.json())
  .then(data => {
    data.features.forEach(feature => {
      // 处理Polygon/MultiPolygon类型
      const renderPolygon = coords => {
        const path = coords[0].map(coord => new google.maps.LatLng(coord[1], coord[0]));
        new google.maps.Polygon({
          path,
          strokeColor: '#ffffff',
          strokeOpacity: 0.5,
          strokeWeight: 2,
          fillColor: '#800105',
          fillOpacity: 0.1,
          map
        });
      };

      if (feature.geometry.type === 'MultiPolygon') {
        feature.geometry.coordinates.forEach(renderPolygon);
      } else if (feature.geometry.type === 'Polygon') {
        renderPolygon(feature.geometry.coordinates);
      }
    });
  });

// 加载并渲染LSOA多边形
fetch("lsoa.json")
  .then(res => res.json())
  .then(data => {
    data.features.forEach(feature => {
      const renderPolygon = coords => {
        const path = coords[0].map(coord => new google.maps.LatLng(coord[1], coord[0]));
        new google.maps.Polygon({
          path,
          strokeColor: '#ff0000',
          strokeOpacity: 0.5,
          strokeWeight: 1,
          fillColor: '#800105',
          fillOpacity: 0.8,
          map
        });
      };

      if (feature.geometry.type === 'MultiPolygon') {
        feature.geometry.coordinates.forEach(renderPolygon);
      } else if (feature.geometry.type === 'Polygon') {
        renderPolygon(feature.geometry.coordinates);
      }
    });
  });

注意：GeoJSON坐标格式为[经度, 纬度]，Google Maps的LatLng需要传入[纬度, 经度]，代码中已做转换。

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