react-google-maps - 在 google-maps-react 中使用折线？

Question

我在我的反应程序中使用google-maps-react。
有什么方法可以在绘制的标记之间绘制折线
吗？有什么方法可以在标记之间画线吗？

Answer 1

从 react-google-maps 导入折线，然后在您的<GoogleMap></GoogleMap>位置内导入，例如：

<Polyline 
  path={pathCoordinates} 
  options={{ 
  strokeColor: '#00ffff',
  strokeOpacity: 1,
  strokeWeight: 2,
  icons: [{ 
    icon: "hello",
    offset: '0',
    repeat: '10px'
  }],
}}
/>

然后将一些位置传递给pathCoordinates例如

pathCoordinates:[ 
  {lat:50, lng:1},
  {lat:50.1, lng:1.1},
] 

Answer 2

是的，您需要做的就是将点添加到选项内的路径中。

<Polyline   geodesic={true}
            options={{
                path: props.route,
                strokeColor: '#00ffff',
                strokeOpacity: 1,
                strokeWeight: 6,
                icons: [{
                    offset: '0',
                    repeat: '10px'
                }],
            }}
 />

props.route 看起来像这样

[   
    {"lat": 3.028846373870724, "lng": 101.62019493865353},
    {"lat": 3.0293392107899226, "lng": 101.62000181960445},
    {"lat": 3.0297677644503347, "lng": 101.61980870055538},
    {"lat": 3.0301963179410842, "lng": 101.61967995452267},
    {"lat": 3.0307105819060256, "lng": 101.6194868354736},
    {"lat": 3.0319319578431805, "lng": 101.61916497039181}
]