折线未在 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
    ]]
}

当构建一个 Circle 时完美呈现，但是当它切换到 Polyline 时它永远不会显示。

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 并从数据源派生时。我打算为多边形、多边形等执行此操作。

Answer 1

我已经复制了你的代码，它对我有效。您看不到任何绘制的多段线，因为您的 strokeOpacity 设置为零并且它变得完全透明。

strokeOpacity: '0.0',

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

strokeOpacity: '0.5',

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

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

Polyline not rendering on react-google-map

javascript

google-maps-api-3

reactjs

react-google-maps