折线未在 react-google-map 上呈现

Question

我正在为多种类型的几何 POINT、LINESTRING、POLYLINE 等制作地理数据可视化工具，方法是根据类型动态生成 。

基本上数据是这样的，普通geojson等

"geometry": {
   "type": "Point",
   "coordinates": [
       144.25178598,
       -36.73540441
   ]
},
"geometry": {
    "type": "LineString",
    "coordinates": [[
        144.25178598,
        -36.73540441
    ], [
        144.25178598,
        -36.73540441
    ]]
}

当构建一个圆形时可以完美呈现，但当它切换到多段线时它永远不会显示。

render() {
  return (
    <Polyline
      path={[
        { lat: -36.73540441, lng: 144.25178598 },
        { lat: -36.73590441, lng: 144.25178198 }
      ]}

      //tried both these to no avail
      // path={this.getPositions(mkr.geometry.coordinates)}

      defaultPath={this.getPositions(mkr.geometry.coordinates)}
      key={mkr.id}
      label={"Test"}
      clickable
      options={{
        strokeColor: '#ff2343',
        strokeOpacity: '0.0',
        strokeWeight: 2
      }}
      visible
    />
  );
}

当硬编码path 并从数据源中派生它时。我打算为 Polygon、MultiPolygon 等做这个。

Answer 1

我已经复制了您的代码，并且它适用于我。由于您的 strokeOpacity 设置为零并且它变得完全透明，因此您看不到任何绘制的折线。

strokeOpacity: '0.0',

将此设置为大于零的值。喜欢：

strokeOpacity: '0.5',

这是关于 stackblitz 的示例：
https://stackblitz.com/edit/react-rppnco