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

【问题标题】：How to draw a dotted Polygon and Circle using "@react-google-maps/api"?如何使用“@react-google-maps/api”绘制虚线多边形和圆形？
【发布时间】：2020-12-14 23:21:10
【问题描述】：

我正在使用 @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
    }
/>

在这里我在谷歌地图上找到了类似的任务here

【问题讨论】：

我是否充分回答了您的问题？

标签： javascript reactjs google-maps react-google-maps

【解决方案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
};

来自Google Docs：

当您想在标记上使用基于矢量的图标或将图像添加到折线

时，符号很有用

这是一个working example，展示了如何自定义折线。

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

对不起，我没有更好的消息告诉你！

【讨论】：