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

问题描述

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

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

解决方法

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

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

// 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，显示了如何自定义折线。

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

对不起，我没有更好的消息给您！