如何在Google Map中添加多个鼠标悬停时改变尺寸的交互式DIV

嗨，针对你想要在Google Maps里实现悬停展开的圆形自定义标记需求，最佳方案肯定是用Google Maps的OverlayView，比普通Marker灵活太多，刚好能完美适配你已经写好的CSS过渡效果，下面给你详细拆解原因和实现步骤：

为什么不选普通Marker？ #

普通Marker的自定义能力非常有限：虽然可以通过icon属性设置自定义图标，但没法嵌入复杂的HTML内容（比如图片+文字）；就算搭配InfoWindow使用，InfoWindow是独立的弹窗组件，做不到你要的“从圆形标记平滑展开”的过渡动画。而OverlayView允许你完全自定义DOM元素，能直接复用你已经写好的CSS hover动画逻辑。

具体实现步骤 #

1. 定义自定义Overlay类 #

首先要创建一个继承自google.maps.OverlayView的类，它负责把你的自定义DOM元素挂载到地图上，并处理经纬度到像素坐标的转换：

class ExpandingMarkerOverlay extends google.maps.OverlayView {
  constructor(options) {
    super();
    this.map = options.map;
    this.position = options.position; // 标记的经纬度对象（google.maps.LatLng）
    this.content = options.content; // 你的自定义HTML内容
    this.div = null;
    this.setMap(this.map);
  }

  // 当Overlay添加到地图时调用
  onAdd() {
    // 创建容器元素并插入自定义内容
    this.div = document.createElement('div');
    this.div.innerHTML = this.content;
    // 将元素添加到能接收鼠标事件的地图层级
    const panes = this.getPanes();
    panes.overlayMouseTarget.appendChild(this.div);
  }

  // 绘制/更新元素位置
  draw() {
    const projection = this.getProjection();
    // 把经纬度转换成地图容器内的像素坐标
    const point = projection.fromLatLngToDivPixel(this.position);
    if (point) {
      // 用transform让元素中心对准经纬度点，避免展开时偏移
      this.div.style.left = `${point.x}px`;
      this.div.style.top = `${point.y}px`;
    }
  }

  // 当Overlay从地图移除时清理元素
  onRemove() {
    if (this.div) {
      this.div.parentNode.removeChild(this.div);
      this.div = null;
    }
  }
}

2. 调整你的CSS样式 #

保留你原来的过渡逻辑，只需要添加transform: translate(-50%, -50%)来让元素中心对准经纬度点，避免展开时位置偏移：

.expanding-marker {
  border: red 5px solid;
  border-radius: 25px;
  overflow: hidden;
  height: 0px;
  width: 0px;
  margin: 0;
  position: absolute;
  transition: 2s all;
  z-index: 0;
  background-color: #fff;
  transform: translate(-50%, -50%); /* 让元素中心对准经纬度点 */
}

.expanding-marker:hover {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  z-index: 9;
}

.expanding-marker img {
  width: 100%;
  height: auto;
}

.expanding-marker p {
  padding: 10px;
  margin: 0;
}

3. 初始化Overlay实例 #

在地图加载完成后，创建并添加自定义标记到地图上：

// 初始化地图（示例）
function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.7128, lng: -74.0060},
    zoom: 12
  });

  // 自定义标记内容
  const markerContent = `
  <div class="expanding-marker marker-1">
    <img src="https://picsum.photos/200/100?0" />
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  </div>
  `;

  // 创建并添加标记到地图
  new ExpandingMarkerOverlay({
    map: map,
    position: new google.maps.LatLng(40.7128, -74.0060),
    content: markerContent
  });
}

// 确保地图API加载完成后初始化
google.maps.event.addDomListener(window, 'load', initMap);

额外注意事项 #

• 批量创建标记：如果有多个实体地点，只需要循环遍历你的地点数据，逐个创建ExpandingMarkerOverlay实例即可。
• 事件处理：因为我们把元素放在了overlayMouseTarget层级，CSS的:hover可以直接生效，不需要额外绑定Google Maps的鼠标事件。
• 性能优化：如果标记数量很多，可以考虑按需加载（比如地图缩放级别达到一定程度才显示），避免DOM元素过多影响性能。

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