单击更改带有标签的标记

Question

我正在使用 React google 地图来渲染带有标记的地图。

如何在点击时更改标记的图标/html？

  <GoogleMap
    defaultZoom={5}
    center={{ lat: (props.latLang && props.latLang.lat) ? props.latLang.lat : 51.5072178, lng: (props.latLang && props.latLang.lng) ? props.latLang.lng : -0.1275862 }}
    ref={mapRef}

  >
    {
      props.markers && props.markers.map((marker) => {
        return (marker.latitude && marker.longitude) ? <MarkerWithLabel
          position={{ lat: parseInt(marker.latitude), lng: parseInt(marker.longitude) }}
          labelAnchor={{ x: 50, y: 50 }}
          labelStyle={{ backgroundColor: "rgba(0,0,0,0)", fontSize: "32px", padding: "16px", width: '50px', height: '50px' }}
          onClick={markerClick}

        >
          <img onClick={imageClick} className={classes.grey} src={imageUrlFor(buildImageObj(marker.image))
              .width(100)
              .height(100)
              .fit("crop")
              .url()} />

        </MarkerWithLabel> : <></>;
      })
    }
    </GoogleMap>

单击时会触发 markerClick 事件，但我无法更改图标。例如，我想在单击时将 classes.grey 图像更改为不同的 class，但仅针对单击的标记。

有什么想法吗？

编辑：

markerClick 函数：

  const markerClick = function (e, x) {
    console.log('markerClick: ', e, '. x: ', x);
  }

Answer 1

抱歉，我不了解 React，但在 vanilla js 中，您通常会保存标记对象，然后在相关对象上使用 setIcon 方法。参见：https://developers.google.com/maps/documentation/javascript/reference/marker#Marker.setIcon

Answer 2

我在上面的评论中使用了 Andrew Lohr 的建议，现在它起作用了。方法如下：

添加了以下状态变量：

const [activeMarkerId, setActiveMarkerId] = useState('');

然后标记点击事件：

  const markerClick = function (marker) {
setActiveMarkerId(marker.dashboardId);

}

在渲染函数中：

<MarkerWithLabel
      position={{ lat: parseInt(marker.latitude), lng: parseInt(marker.longitude) }}
      labelAnchor={{ x: 25, y: 25 }}
      labelStyle={{ backgroundColor: "red", fontSize: "32px"}}
      onClick={() => markerClick(marker)}          
    >
      <img onClick={imageClick} className={marker.dashboardId === activeMarkerId ? classes.greyActive  : classes.grey} src={imageUrlFor(buildImageObj(marker.image))
          .width(50)
          .height(50)
          .fit("crop")
          .url()} />

    </MarkerWithLabel>

谢谢，安德鲁·洛尔！

单击更改带有标签的标记

Change marker with label on click

javascript

reactjs

click

markers

react-google-maps