如何解决如何使用“ @ 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,显示了如何自定义折线。 您唯一的选择(这不适用于“圆”,仅适用于“多边形”)是将“多边形”渲染为多段线,然后可以对其进行样式设置。我个人不会打扰。 对不起,我没有更好的消息给您!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。