如何为标记添加默认选项
How to add default Options for markers
我想在使用标记绘图控件单击时创建的标记中添加不同的图标。(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)
}
}
}}
快速提示:在提问之前命名您正在使用的包。我花了一段时间才在 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>
);
我想在使用标记绘图控件单击时创建的标记中添加不同的图标。(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)
}
}
}}
快速提示:在提问之前命名您正在使用的包。我花了一段时间才在 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>
);