如何在tomchentw/react-google-maps中点击Marker切换图标及尺寸？

嘿，我来帮你搞定这个需求！要实现点击标记切换为灰色图标并放大的效果，核心思路是用组件状态追踪每个标记的选中状态，然后根据状态动态渲染Marker的icon属性。下面是具体的步骤和代码示例：

1. 初始化组件状态 #

首先在你的类组件里添加一个状态，用来记录每个house标记是否被选中。我们用对象来存储，键是house的_id，值是布尔值（选中为true，未选中为false）：

constructor(props) {
  super(props);
  this.state = {
    selectedMarkers: {} // 格式：{ [houseId]: boolean }
  };
}

2. 编写点击事件处理方法 #

修改你的MarkerClicked方法，用来切换对应house标记的选中状态：

MarkerClicked = (houseId) => {
  this.setState(prevState => ({
    selectedMarkers: {
      ...prevState.selectedMarkers,
      [houseId]: !prevState.selectedMarkers[houseId] // 切换选中状态
    }
  }));
};

这里用函数式更新setState是为了确保我们拿到最新的状态值，避免状态更新的异步问题。

3. 动态设置Marker的icon属性 #

现在根据标记的选中状态，动态生成icon配置。未选中时用红色图标，选中时用灰色图标并增大尺寸：

// 假设你的灰色图标路径是 "/images/mapGray2.png"
// 定义尺寸：默认尺寸和选中后的放大尺寸，你可以根据实际图标大小调整
const defaultSize = new google.maps.Size(32, 32);
const selectedSize = new google.maps.Size(48, 48);

// 遍历houses渲染Marker时：
{houses.map(house => {
  const isSelected = this.state.selectedMarkers[house._id] || false;
  return (
    <Marker
      key={house._id}
      onClick={() => this.MarkerClicked(house._id)}
      icon={{
        url: isSelected ? "/images/mapGray2.png" : "/images/mapRed2.png",
        size: isSelected ? selectedSize : defaultSize,
        scaledSize: isSelected ? selectedSize : defaultSize // 确保图标正确缩放，避免变形
      }}
      position={{ lat: house.location.lat, lng: house.location.lng }}
    />
  );
})}

关键细节说明 #

• 状态管理：用对象存储每个标记的选中状态，这样即使有多个标记，也能精准控制单个标记的样式切换。
• 图标尺寸：google.maps.Size用来定义图标的原始尺寸和缩放尺寸，scaledSize可以确保图标在地图上显示的大小符合预期。
• 事件绑定：把onClick改成箭头函数直接调用MarkerClicked，比bind更简洁，也避免了重复创建函数的小问题（当然用bind也没问题，看个人习惯）。

这样设置后，用户点击标记时，就会自动切换成灰色放大的图标，再次点击会切回红色默认图标啦！

内容的提问来源于stack exchange，提问作者Allu Manikyam