如何为标记添加默认选项

Question

我想为单击标记绘图控件时创建的标记添加不同的图标。（react-google-maps 包）

我尝试在 DrawingManager 组件中添加一个 markerOptions 道具，但它似乎不像 polygonOptions 那样工作。

<GoogleMap defaultZoom={13} defaultCenter={{ lat: 38.022871, lng: 23.790431 }}>
        <DrawingManager
          ref={props.onDrawingManagerMounted}
          defaultDrawingMode={this.state.currentDrawingMode}
          defaultOptions={{
            drawingControl: true,
            drawingControlOptions: {
              position: google.maps.ControlPosition.TOP_CENTER,
              drawingModes: [
                google.maps.drawing.OverlayType.POLYGON,
                google.maps.drawing.OverlayType.MARKER
              ]
            },
            polygonOptions: this.colorOptions(),
            markerOptions: {
              icon: {
                url: require("../../../assets/images/helipadIcon.png"),
                anchor: new google.maps.Point(5, 58)
              }
            }
          }}

Answer 1

快速提示：在提出问题之前命名您正在使用的包。我花了一段时间才在 npm 上找到 react-google-maps 包。

查看命名包的官方文档：https://tomchentw.github.io/react-google-maps/

您会发现DrawingManager 组件不提供名为markerOptions 或polygonOptions 的道具。而是使用 Marker 组件 (https://tomchentw.github.io/react-google-maps/#marker)，它提供了 icon 类型的 any 属性。

<Marker icon={} .../>

如果您想更改/编辑使用DrawingManager 绘制的标记，您可以使用将返回marker 对象的onMarkerComplete 回调函数。您可以使用标记对象来更改图标。见：https://developers.google.com/maps/documentation/javascript/reference/drawing#DrawingManager.markercomplete

const icon = {
   url: require("../../../assets/images/helipadIcon.png"),
   anchor: new google.maps.Point(5, 58)
};
const onMarkerComplete = (marker) => {
   marker.setIcon(icon);
}

return (
<DrawingManager onMarkerComplete={onMarkerComplete} ...>
...
</DrawingManager>
);