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'
                }
              }}
            />