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

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

1 个答案: