如何在react-google-maps/api的Polygon组件中动态处理多路径数组

直接通过扩展运算符动态拼接外轮廓和内孔数组即可，不需要用flat()或者额外映射，具体修改如下：

你的原代码中paths是固定写死了两个内孔：

paths={[outerCoords, innerCoords[0], innerCoords[1]]}

改成用扩展运算符展开innerCoords数组，就能自动适配任意长度的内孔：

return polyline.location.map((outerCoords, polyInd) => {
  // ...其他逻辑
  return (
    <Polygon 
      key={`polyline-${i}-${polyInd}`} 
      paths={[outerCoords, ...innerCoords]} 
      // ...其他属性
    />
  );
});

原理说明 #

react-google-maps/api的Polygon组件的paths参数规则和原生Google Maps API一致：

• 数组第一个元素是多边形的外轮廓坐标集合
• 数组后续的每个元素都是一个独立的内孔坐标集合

用[outerCoords, ...innerCoords]的方式，会把innerCoords里的每一个内孔数组依次追加到外轮廓后面，不管innerCoords长度是多少，都能正确渲染所有内孔。

之前用flat()无效，大概率是因为innerCoords本身就是一维数组（每个元素都是内孔坐标数组），flat()不会改变结构，反而可能破坏了paths需要的层级结构。

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