如何用循环高效创建不同颜色的Google Maps多边形区域？

最优方案：重构数据结构（推荐） #

把所有区域的坐标和对应颜色整合到一个数组中，循环长度自动等于区域数量，后续新增区域只需往数组里添加对象即可，无需修改循环逻辑：

// 整合所有区域的坐标与颜色，新增区域直接追加对象
const regions = [
  {
    coords: [
      { lat: 32.821687, lng: -85.21314 },
      { lat: 32.820244, lng: -85.21176 },
      { lat: 32.821182, lng: -85.20996 },
      { lat: 32.821182, lng: -85.20782 },
      { lat: 32.82111,  lng: -85.20576 },
      { lat: 32.821903, lng: -85.20378 },
      { lat: 32.822696, lng: -85.20181 },
      { lat: 32.823418, lng: -85.20035 }
    ],
    color: 'red'
  },
  {
    coords: [/* coDist2Coords 的坐标内容 */],
    color: 'green'
  },
  {
    coords: [/* coDist3Coords 的坐标内容 */],
    color: 'yellow'
  },
  // ... 继续添加其他区域
];

// 存储所有创建的多边形实例，方便后续操作（如添加到地图、修改属性等）
const polygons = [];

for (let i = 0; i < regions.length; i++) {
  const { coords, color } = regions[i];
  const polygon = new google.maps.Polygon({
    paths: coords,
    strokeColor: color,
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: color,
    fillOpacity: 0.35
  });
  
  polygons.push(polygon);
  // 如果需要保留原来的 coDist1、coDist2 变量，可添加此行
  window[`coDist${i + 1}`] = polygon;
}

兼容现有变量的方案 #

如果不想修改已有的coDist1Coords至coDistNCoords变量，可以通过动态拼接变量名的方式获取坐标，同时自动检测区域数量：

const colors = ['red', 'green', 'yellow', 'blue', 'orange', 'brown'];
const polygons = [];
let regionIndex = 1;

// 循环检测并创建多边形，直到找不到对应的坐标变量为止
while (true) {
  // 通过变量名字符串拼接获取坐标（若变量不在全局作用域，替换window为对应作用域对象）
  const coords = window[`coDist${regionIndex}Coords`];
  if (!coords) break; // 无对应坐标变量时终止循环
  
  // 若颜色数组长度不足，使用默认灰色
  const color = colors[regionIndex - 1] || 'gray';
  
  const polygon = new google.maps.Polygon({
    paths: coords,
    strokeColor: color,
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: color,
    fillOpacity: 0.35
  });
  
  polygons.push(polygon);
  window[`coDist${regionIndex}`] = polygon; // 赋值回原变量名
  regionIndex++;
}

原错误代码的问题说明 #

1. 变量声明语法错误：var coDist[i] 不符合JavaScript语法，不能用数组下标声明变量，应先声明数组再添加元素，或使用对象存储。
2. 变量引用错误：coDist[i]Coords 无法正确获取对应的坐标变量，需通过字符串拼接结合方括号访问（如window[coDist${i+1}Coords]）。
3. 对象字面量缺失大括号：new google.maps.Polygon() 的参数必须是一个对象字面量，需要用{}包裹所有配置项。

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