Google Maps API中GeoJSON填充颜色不生效的解决方法求助

以下是针对你遇到的填充颜色不生效问题的排查和解决方法：

1. 检查GeoJSON的几何类型 #

只有Polygon/MultiPolygon类型的要素才会显示填充颜色，如果你的GeoJSON里是LineString/MultiLineString（线）或者Point（点），设置fillColor自然不会有效果。可以直接打开你的GeoJSON文件查看geometry.type字段确认类型。

2. 显式设置fillOpacity属性 #

Google Maps Data层默认的fillOpacity为0.3，但如果要素样式被隐性覆盖，或者你需要完全不透明的填充效果，显式设置fillOpacity: 1可以确保填充颜色正常显示。

3. 确保样式在GeoJSON加载完成后应用 #

loadGeoJson是异步操作，虽然setStyle会自动应用到后续加载的要素，但通过回调函数绑定样式，可以避免加载时序导致的样式失效：

const map = new google.maps.Map(ref.current, mapOptions);

map.data.loadGeoJson('https://storage.googleapis.com/geo_jsons/west%20(2).geojson', {}, () => {
  map.data.setStyle((feature) => {
    const name = feature.getProperty('name');
    console.log(name);
    
    return /** @type {!google.maps.Data.StyleOptions} */ {
      fillColor: name === 'a' ? '#0000FF' : '#000000',
      fillOpacity: 1, // 显式设置填充透明度
      strokeColor: 'black',
      strokeWeight: 2,
    };
  });
});

4. 检查GeoJSON要素是否自带样式 #

如果你的GeoJSON要素的properties字段中自带fillColor等样式属性，会优先覆盖你通过setStyle设置的样式。此时需要清除这些内置样式，或者在setStyle中强制覆盖。

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