Google Maps JS API中setStyle函数不生效问题求助

问题根源及修复步骤： #

1. 样式被覆盖
   你在调用带匹配逻辑的setStyle函数后，又执行了一次zips.setStyle({zIndex:4})，这会直接覆盖之前的样式规则，导致自定义颜色逻辑完全失效。需要把zIndex合并到样式函数的返回对象中。

2. 循环逻辑错误
   你的循环里每次都将color重置为black，即便找到匹配的邮政编码，后续循环（如果存在不匹配项）会把颜色重新设回黑色。应该先设置默认颜色，找到匹配项后直接赋值并终止循环，或者用对象映射来优化匹配效率。

3. 确保API返回数据正确解析
   确认$.get返回的data是正确解析的JSON数组，如果后端返回的是纯文本，需要手动解析或指定dataType: 'json'参数。

修正后的代码： #

// 初始化代码
const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: { lat: 49.496675, lng: -102.65625 },
});

let states = new google.maps.Data({map:map});
let counties = new google.maps.Data({map:map});
let zips = new google.maps.Data({map:map});
let ziplist = []; // 补充ziplist初始化，避免未定义错误

// 核心代码
zips.loadGeoJson('data/zip_codes/GEOID_' + GEOID + '.json', {}, function (features) {

  zips.forEach(function (feature) {
    ziplist.push(feature.getProperty('ZCTA5CE20'));
  });

  // 指定dataType确保返回JSON格式
  $.get("data/API/zipcolor.cfm?Zip=" + ziplist.toString(), {dataType: 'json'}, function (data) {
    // 将API返回的zip-color转成对象映射，提升匹配效率
    const zipColorMap = {};
    data.forEach(item => {
      zipColorMap[item.ZIPCODE] = item.COLOR;
    });

    zips.setStyle(function (feature) {
      const zipCode = feature.getProperty('ZCTA5CE20');
      // 从映射中取颜色，默认黑色
      const color = zipColorMap[zipCode] || 'black';
      return {
        fillColor: color,
        zIndex: 4 // 合并zIndex到样式返回中
      }
    });
  });
});

额外说明： #

• 用对象zipColorMap替代循环匹配，避免每次渲染都遍历整个数组，提升性能，尤其是当邮政编码数量较多时。
• 确保ZCTA5CE20和ZIPCODE的类型一致（都是字符串），避免全等匹配失败。

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