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

Posted 2023-03-28

【中文标题】React js react-google-maps-api 更改颜色标记默认

【英文标题】：React js react-google-maps-api change color marker default

【发布时间】：2020-05-03 03:27:04

【问题描述】：

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

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

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

代码：

   <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",
          
        />

【问题讨论】：

尝试`颜色：“#0000ff”`

不行：codesandbox.io/s/react-google-maps-api-2q3h4

【参考方案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

【讨论】：

我想要经典标记图标的问题：google.com/…

codesandbox.io/s/… - 你可以随意修改“路径”。