AngularUI：處理Google地圖標記的滑鼠懸停事件

問題：

我花了一些時間才弄清楚這個問題，所以我覺得這個問題值得一篇自己的博客文章。當我試著用AngularUI連接Google Map標記的滑鼠懸停事件時，我發現自己很困惑。文件在這件事情上很含糊，說它只支援單一標記，而不支援多個標記。

對於單一標記，只需要在HTML中指定一個帶有 events 屬性的指令就很直接：

<ui-gmap-marker events="marker.events"></ui-gmap-marker>

然後在控制器中：

$scope.marker = {
  events: {
    mouseover: function (marker, eventName, args) {
      // 回調代碼在此
    },
  },
}

然而，相同的做法不適用於多個標記。我最初以為我可以簡單地為每個標記添加滑鼠懸停事件，就像這樣：

markers.push({
  events: {
    mouseover: function (mapModel, eventName, originalEventArgs) {
      console.log("I'd really like to show the info window on mouseover.")
    },
  },
})

我的解決方案：

為了解決這個問題，將以下內容添加到HTML markers 指令：

events="clickEventsObject"

並在控制器中：

$scope.clickEventsObject = {
  mouseover: markerMouseOver,
  mouseout: markerMouseOut,
}

function markerMouseOver(marker, e) {
  // 回調代碼在此
}

function markerMouseOut(marker, e) {
  // 回調代碼在此
}

它成功了！這個處理程序返回一個直接映射的模型陣列，該陣列屬於與事件一起發送的gMarker集群。如果你有任何問題，請隨時向我提問。😊