如何使用“@react-google-maps/api”绘制虚线多边形和圆？

Question

我正在使用@react-google-maps/api": "1.8.2"并想绘制一个虚线多边形和圆但是当我将选项({icons: [icon: lineSymbol, repeat: '10px]})传递给 or . 它不工作。

const lineSymbol = {
    path: 'M 0,-1 0,1',
    scale: 2,
    strokeColor: 'green',
    strokeOpacity: 1,
}
const polygonProps = {
        options: {
            fillOpacity: 0,
            icons: [{
                icon: lineSymbol,
                offset: '0',
                repeat: '10px',
            }, ],
            // strokeColor: polygonData.strokeColor,
            // strokeWidth: 1,
            zIndex: polygonData.zIndex || 10,
        },
        path: polygonData.pointList.map(item => ({
            lat: item[0],
            lng: item[1]
        })),
        title: polygonData.title,
    }

    <
    Polygon {
        ...polygonProps
    }
/>

在这里，我发现类似的任务在谷歌地图在这里

Answer 1

您无法像使用折线那样自定义多边形和圆的笔划。

我们使用以下语法自定义折线：

// Define a symbol using SVG path notation, with an opacity of 1.
const lineSymbol = {
  path: "M 0,-1 0,1",
  strokeOpacity: 1,
  scale: 4
};

从谷歌文档：

当您想在标记上使用基于矢量的图标或将图像添加到折线时，符号很有用

这是一个显示如何自定义折线的工作示例。

您唯一的选择（这不适用于圆形，仅适用于多边形）是将多边形渲染为折线，然后您可以对其进行样式设置。 我个人不会打扰。

抱歉，我没有更好的消息要告诉您！