如何在AGM标记上为鼠标悬停与点击事件显示不同snazzy-info-window？

这个问题我之前也碰到过，其实可以通过给每个Marker绑定两个独立的<agm-snazzy-info-window>，分别控制hover和click事件的显示状态来实现，完全能满足你“hover显示简单提示、点击显示自定义表单”的需求，具体实现如下：

1. 组件类逻辑处理 #

首先在组件的.ts文件里定义状态变量，用来控制两个信息窗口的显示/隐藏，同时处理Marker的事件回调：

import { Component } from '@angular/core';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent {
  // 地图中心坐标
  mapCenter = { lat: 51.678418, lng: 7.809007 };
  // Marker列表示例（可替换成你的业务数据）
  markers = [
    { lat: 51.678418, lng: 7.809007, title: '办公区', data: { id: 1, name: '总部大楼', desc: '核心办公区域' } },
    { lat: 51.680000, lng: 7.812000, title: '仓库', data: { id: 2, name: '物流仓库', desc: '货物存储中心' } }
  ];

  // Hover相关状态
  currentHoverMarker: any;
  showTooltipWindow = false;
  // Click相关状态
  currentClickedMarker: any;
  showFormWindow = false;

  // Marker鼠标悬停事件
  onMarkerHover(marker: any) {
    this.currentHoverMarker = marker;
    this.showTooltipWindow = true;
    // 点击窗口打开时自动关闭，避免重叠
    this.showFormWindow = false;
  }

  // Marker鼠标离开事件（必须绑定，否则hover窗口会一直显示）
  onMarkerMouseOut() {
    this.showTooltipWindow = false;
  }

  // Marker点击事件
  onMarkerClick(marker: any) {
    this.currentClickedMarker = marker;
    this.showFormWindow = true;
    // hover窗口打开时自动关闭
    this.showTooltipWindow = false;
  }

  // 表单保存示例方法
  saveMarkerData() {
    console.log('保存Marker数据:', this.currentClickedMarker.data);
    // 这里可以添加你的业务逻辑，比如调用接口保存数据
  }
}

2. 模板文件实现 #

在.html文件中，给每个Marker绑定两个独立的<agm-snazzy-info-window>，分别对应hover和click场景：

<agm-map 
  [latitude]="mapCenter.lat" 
  [longitude]="mapCenter.lng"
  [zoom]="14"
>
  <!-- 遍历所有Marker -->
  <agm-marker 
    *ngFor="let marker of markers"
    [latitude]="marker.lat"
    [longitude]="marker.lng"
    (mouseOver)="onMarkerHover(marker)"
    (mouseOut)="onMarkerMouseOut()"
    (markerClick)="onMarkerClick(marker)"
  >
    <!-- Hover时显示的简单提示窗口 -->
    <agm-snazzy-info-window
      [isOpen]="showTooltipWindow && currentHoverMarker === marker"
      [closeWhenOthersOpen]="true"
      [placement]="'top'"
      [offset]="{ top: -10, left: 0 }"
    >
      <ng-template>
        <div class="tooltip-content">
          <h5>{{ currentHoverMarker?.title }}</h5>
          <p>{{ currentHoverMarker?.data.desc }}</p>
        </div>
      </ng-template>
    </agm-snazzy-info-window>

    <!-- Click时显示的自定义表单窗口 -->
    <agm-snazzy-info-window
      [isOpen]="showFormWindow && currentClickedMarker === marker"
      [closeWhenOthersOpen]="true"
      [placement]="'right'"
      [maxWidth]="320"
    >
      <ng-template>
        <div class="form-content">
          <h4>编辑Marker信息</h4>
          <form>
            <div class="form-item">
              <label>Marker名称:</label>
              <input 
                type="text" 
                [(ngModel)]="currentClickedMarker?.data.name" 
                name="markerName" 
                class="form-input"
              >
            </div>
            <div class="form-item">
              <label>描述:</label>
              <textarea 
                [(ngModel)]="currentClickedMarker?.data.desc" 
                name="markerDesc" 
                class="form-textarea"
              ></textarea>
            </div>
            <button type="button" class="save-btn" (click)="saveMarkerData()">保存修改</button>
          </form>
        </div>
      </ng-template>
    </agm-snazzy-info-window>
  </agm-marker>
</agm-map>

3. 自定义样式（可选） #

在.css文件里给两个窗口添加差异化样式，让视觉区分更明显：

/* Hover提示样式 */
.tooltip-content {
  padding: 8px 12px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  font-size: 14px;
}

.tooltip-content h5 {
  margin: 0 0 4px 0;
  color: #333;
}

.tooltip-content p {
  margin: 0;
  color: #666;
}

/* 表单窗口样式 */
.form-content {
  padding: 15px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.form-content h4 {
  margin: 0 0 12px 0;
  color: #222;
}

.form-item {
  margin-bottom: 12px;
}

.form-item label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: #555;
}

.form-input, .form-textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-textarea {
  resize: vertical;
  min-height: 60px;
}

.save-btn {
  padding: 6px 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.save-btn:hover {
  background-color: #0056b3;
}

关键逻辑说明 #

• 每个Marker绑定了mouseOver、mouseOut、markerClick三个事件，分别控制对应窗口的显示状态；
• 两个信息窗口通过isOpen属性精准匹配当前触发事件的Marker，避免所有Marker的窗口同时打开；
• 设置closeWhenOthersOpen为true，确保同一时间只显示一个信息窗口；
• 事件回调中会自动关闭另一个窗口，避免两个窗口重叠显示。

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