React js react-google-maps-api 更改颜色标记默认值

Question

我想更改默认标记的颜色，但我没有成功。

我尝试了这种风格，但它似乎不起作用。

在官方文档中，它说您可以通过传递路径来更改另一个图标，但我想做的是使用默认图标，但只更改它的颜色。

法典：

<Marker
key={place.id}
position={place.pos}
label={key+"-"+key}
onLoad={marker => markerLoadHandler(marker, place)}
onClick={event => markerClickHandler(event, place)}
// Not required, but if you want a custom icon:
/*icon={{
path: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
//path: mapRef.FORWARD_CLOSED_ARROW,
fillColor: "#0000ff",
fillOpacity: 1.0,
strokeWeight: 0,
scale: 1.25,
strokeColor: "0000ff",
}}*/
//icon={"http://maps.google.com/mapfiles/ms/icons/blue-dot.png"}
style={{
backgroundColor: "#0000ff",
fillColor: "#0000ff",
strokeColor: "0000ff",
}}
/>

Answer 1

请尝试这样的事情：

{myPlaces.map(place => (
<Marker
key={place.id}
position={place.pos}
onLoad={marker => {
const customIcon = (opts) => Object.assign({
path: 'M12.75 0l-2.25 2.25 2.25 2.25-5.25 6h-5.25l4.125 4.125-6.375 8.452v0.923h0.923l8.452-6.375 4.125 4.125v-5.25l6-5.25 2.25 2.25 2.25-2.25-11.25-11.25zM10.5 12.75l-1.5-1.5 5.25-5.25 1.5 1.5-5.25 5.25z',
fillColor: '#34495e',
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 1,
scale: 1,
}, opts);
marker.setIcon(customIcon({
fillColor: 'green',
strokeColor: 'white'
}));
return markerLoadHandler(marker, place)
}}
onClick={event => markerClickHandler(event, place)}
/>
))}

https://codesandbox.io/s/react-google-maps-api-tl0sk?fontsize=14&hidenavigation=1&theme=dark