PolylinesOprtions DirectionRender react-google-maps/api

Question

我尝试从 react-google-maps/api 更改 DirectionRender 上的标记。 我已经更改了折线颜色，但我没有更改标记 A 和 B，我的代码。

<DirectionsRenderer
      getIcon={(icon) => console.log("icon render", icon)}
      options={{
        directions: response,
              polylineOptions: {
           strokeColor: "#c23531",
          icons: [{
            icon:{
              path:{to},
              strokeOpacity: 1
            },
            offset:'50%'
          },{
            icon:{
              path:{fromm},
              strokeOpacity: 1
            },
            offset:'50%'
          }],
        },
      }}
/>

Answer 1

@react-google-maps/api 库的DirectionsRenderer没有像您在代码中那样的getIcon道具名称。 要更改 DirectionsRenderer 中标记的图标，您需要使用具有google.maps.DirectionsRendererOptions 接口属性的options 。

在那里，您可以看到一个markerOptions道具名称，它使用具有icon属性的google.maps.MarkerOptions 接口。

这是一个示例代码（将您的 API 密钥放在代码示例的 index.js 文件上以使其工作）以及如何使用options属性更改图标的代码片段：

<DirectionsRenderer
              directions={this.state.directions}
              options={{
                markerOptions: {
                  icon:
                    'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
                }
              }}
            />