PolylinesOptions DirectionRender react-google-maps/api

【问题标题】：PolylinesOprtions DirectionRender react-google-maps/apiPolylinesOptions DirectionRender react-google-maps/api
【发布时间】：2021-09-13 17:10:08
【问题描述】：

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

【问题讨论】：

是的，事情是这样的，改变两个标记，我想改变 A 和 B 标记

标签： reactjs google-maps frontend react-google-maps

【解决方案1】：

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

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

这里有一个sample code（把你的 API 密钥放在代码示例的 index.js 文件中以使其工作）和代码 sn -p 如何使用 options 属性进行更改图标：


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

【讨论】：