PolylinesOprtions DirectionRender react-google-maps/api

如何解决PolylinesOprtions DirectionRender react-google-maps/api

我尝试从 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},offset:'50%'
          }],},}}
/>

解决方法

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

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

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

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