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