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集群。如果你有任何問題,請隨時向我提問。😊