如何为标记添加默认选项

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)，它提供类型为 any.

的属性 icon

<Marker icon={} .../>

如果您想 change/edit 使用 DrawingManager 绘制的标记，您可以使用 onMarkerComplete 回调函数 return marker 目的。您可以使用标记对象来更改图标。参见：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>
);

如何为标记添加默认选项

How to add default Options for markers

reactjs

react-google-maps