AngularJS 1.0.7中如何实现鼠标悬停高亮地图InfoWindow？

嘿，我来帮你搞定这个需求！要实现列表项悬停时对应地图InfoWindow高亮，咱们可以用Angular的指令结合Google Maps API来实现，完全贴合Angular的思维方式，下面是具体步骤：

1. 维护InfoWindow与列表项的关联关系 #

首先，咱们需要在控制器里把每个车辆对应的InfoWindow存起来，这样悬停时能快速定位到对应的窗口。在你的控制器里添加一个存储对象：

// 用car的id作为key，存储对应的InfoWindow
$scope.carInfoWindows = {};
// 同时存储marker，方便后续打开InfoWindow时使用
$scope.carMarkers = {};

接着在创建Marker和InfoWindow的逻辑里，把它们和对应的car.id关联存入对象：

angular.forEach($scope.cars, function(car) {
  // 创建地图Marker（假设你已经有地图实例map）
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(car.lat, car.lng),
    map: map,
    title: '车辆' + car.id
  });
  
  // 给InfoWindow的内容添加自定义类和标识，方便后续定位DOM元素
  var infoWindowContent = '<div class="car-info-window" data-car-id="' + car.id + '">' +
    '<h4>车辆ID: ' + car.id + '</h4>' +
    '<p>价格: ' + car.price + '</p>' +
    '</div>';
  
  var infoWindow = new google.maps.InfoWindow({
    content: infoWindowContent
  });
  
  // 存入对象，建立car.id和marker、infoWindow的关联
  $scope.carMarkers[car.id] = marker;
  $scope.carInfoWindows[car.id] = infoWindow;
  
  // 可选：绑定marker点击打开InfoWindow的事件
  marker.addListener('click', function() {
    infoWindow.open(map, marker);
  });
});

2. 实现悬停高亮与取消高亮的函数 #

在控制器里添加两个处理函数，分别对应鼠标悬停和离开的逻辑：

// 悬停时高亮对应的InfoWindow
$scope.highlightCarInfoWindow = function(carId) {
  var targetInfoWindow = $scope.carInfoWindows[carId];
  var targetMarker = $scope.carMarkers[carId];
  
  if (targetInfoWindow && targetMarker) {
    // 可选：如果希望悬停时自动打开InfoWindow，就保留这一行
    targetInfoWindow.open(map, targetMarker);
    
    // 找到InfoWindow的DOM元素，修改样式实现高亮
    var infoWindowEl = document.querySelector('.car-info-window[data-car-id="' + carId + '"]');
    if (infoWindowEl) {
      // 自定义高亮样式，比如背景色、边框
      angular.element(infoWindowEl).addClass('info-window-highlight');
    }
  }
};

// 鼠标离开时取消高亮
$scope.removeInfoWindowHighlight = function(carId) {
  var infoWindowEl = document.querySelector('.car-info-window[data-car-id="' + carId + '"]');
  if (infoWindowEl) {
    angular.element(infoWindowEl).removeClass('info-window-highlight');
  }
};

3. 给列表项绑定Angular鼠标事件指令 #

修改你的列表HTML，给每个<li>添加ng-mouseover和ng-mouseleave指令，传入当前car的id：

<ul>
  <li 
    ng-repeat="car in cars"
    ng-mouseover="highlightCarInfoWindow(car.id)"
    ng-mouseleave="removeInfoWindowHighlight(car.id)"
  >
    <!-- 这里添加你的车辆图片 -->
    <img ng-src="{{car.imageUrl}}" alt="车辆图片" class="car-item-img">
    {{car.id}}: {{car.price}} (悬停我高亮地图里的信息窗口!)
  </li>
</ul>

额外优化：用CSS类管理高亮样式 #

把高亮样式写到CSS里，比直接修改行内样式更优雅：

.info-window-highlight {
  background-color: #fff3cd;
  border: 2px solid #ffc107;
  padding: 8px;
}

这样后续调整样式只需要修改CSS，不用动JS代码，更符合前端开发的最佳实践~

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