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

【问题标题】：Use polyline in google-maps-react?在 google-maps-react 中使用折线？
【发布时间】：2018-05-03 22:01:45
【问题描述】：

我在我的反应程序中使用 google-maps-react。
有没有办法在绘制的标记之间绘制折线
任何 in- bulid 方法在标记之间划线

【问题讨论】：

试试这个tomchentw.github.io/react-google-maps/#directionsrenderer 只是一个建议。

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

【讨论】：

但是，如何即时添加Polyline ？

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

【讨论】：