如何在react-google-maps中动态更改Marker图标？

核心问题 #

你的代码中MarkerF的icon属性被固定设置为deaIcon，没有根据选中状态动态切换，因此点击设备后图标不会更新。

修复步骤 #

1. 动态绑定图标：将icon属性改为根据当前设备是否被选中动态判断，使用三元表达式结合可选链操作符（避免初始状态selectedDeviceData为undefined时触发报错）：

   icon={selectedDeviceData?.id === item.id ? deaSelected : deaIcon}
   

2. 利用Redux状态触发重渲染：useSelector会自动监听selectedDeviceData的状态变化，当点击设备更新Redux状态后，组件会重新渲染，此时每个MarkerF的icon属性会重新计算，从而完成图标切换。

修改后的完整代码 #

import { GoogleMap, InfoWindow, useJsApiLoader, MarkerF } from "@react-google-maps/api";
import { options } from "../../../../../helpers/lib/MapOptions";
import { IDevice } from "pages/authenticated/DevicesAndAccessories/types";
import { useMapCenter } from "../../hooks/Index";
import { IDeviceReducer, IDeviceSelectedReducer } from "types/types";
import { useDispatch, useSelector } from "react-redux";
import { removeSelectedDevice, selectedDevice } from "redux/devices/actions";

const deaIcon: string =
require("../../../../../assets/icons/home-icons/Dea/dea.svg").default;
const deaSelected: string =
require("../../../../../assets/icons/home-icons/Dea/dea-selected.svg").default;

export const GoogleMapsPageMap = () => {
const dispatch = useDispatch();
const devicesData = useSelector((state: IDeviceReducer) => state.allDevices.devices);
const selectedDeviceData = useSelector((state: IDeviceSelectedReducer) => state.device);
const center = useMapCenter();

let { isLoaded } = useJsApiLoader({
id: "google-map-script",
googleMapsApiKey: "api_key",
});

return (
<>
{isLoaded ? (
<GoogleMap
mapContainerStyle={{ width: "100%", height: "100%" }}
center={center}
zoom={15}
options={options}
>

          <MarkerF position={center}></MarkerF>
    
          {devicesData.map((item: IDevice, index: any) => (
            <MarkerF
              // 已修改：动态切换图标
              icon={selectedDeviceData?.id === item.id ? deaSelected : deaIcon}
              key={item.id}
              position={devicesData[index].position}
              onClick={() => {
                dispatch(selectedDevice(item));
              }}
            >
              {selectedDeviceData?.id === item.id &&
                <InfoWindow
                  position={devicesData[index].position}
                  onCloseClick={() => dispatch(removeSelectedDevice())}
                >
                  <div>{item.name}</div>
                </InfoWindow>
              }
            </MarkerF>
          ))}
    
        </GoogleMap>
      ) : null}
    </>

);
};

额外检查项 #

• 确认selectedDevice action正确将选中设备的信息存入Redux状态，保证selectedDeviceData在点击后包含有效的id值。
• 验证deaSelected的图标路径是否正确，避免因路径错误导致切换后图标不显示。

内容的提问来源于stack exchange，提问作者Cristian Melo