ng-map 标记上的 ng-mouseover 不会触发答案

【问题标题】：ng-mouseover on ng-map marker doesn't fireng-map 标记上的 ng-mouseover 不会触发
【发布时间】：2017-11-13 02:52:45
【问题描述】：

我有一个 ng-map（使用流行的 ng-map 库通过 angularjs 实现 Google 地图）：

<ng-map>
    <div ng-repeat="loc in mapsCtrl.locations">
        <marker ng-mouseover="mapsCtrl.handleMarkerMouseover({{loc}})"
        ...
</ng-map>

...但是鼠标悬停不会触发。如果我使用鼠标悬停它可以工作，但是会在存储在“loc”中的 JSON 上产生角度阻塞。我该如何解决？我想知道我是否需要在某个地方进行编译，但是我不想破解 ng-map 并且我不明白为什么需要编译，但这就像标记指令中的 ng-mouseover 可能不是是否正确编译为 Google 地图可以识别的事件？

【问题讨论】：

标签： javascript angularjs google-maps ng-map

【解决方案1】：

如果我不插入 JSON，Angular 将不再阻塞它，所以我可以使用鼠标悬停，这很有效：

<ng-map>
    <div ng-repeat="loc in mapsCtrl.locations">
        <marker on-mouseover="mapsCtrl.handleMarkerMouseover(loc)"
        ...
</ng-map>

【讨论】：

【解决方案2】：

我知道你已经回答了你自己的问题，但我一直在努力解决同样的问题并且有一些额外的点！

NgMap 库只是 Google Maps API 的封装，这意味着事件仍然是 API 使用的相同 javascript 事件，而不是 angular 指令。

正如您所发现的，一种选择是使用鼠标悬停事件，但需要注意的是，传回您的方法的第一个对象实际上是事件本身（幸运的是，它还包含标记位置) 如果你想要角度对象，它实际上是第二个参数。

在您的控制器中：

vm.positions = [
  {pos:[40.71, -74.21], name: "marker 1" },
  {pos:[40.72, -74.20], name: "marker 2" },
  {pos:[40.73, -74.19], name: "marker 3" },
];

//NOTE THE TWO ARGUMENTS FOR THIS METHOD
vm.myMethod = function (event, angularObj)
{
    console.log(event.latLng); //The Event contains the latLng
    console.log(angularObj.name)
}

在你看来：

<ng-map zoom="11" center="[40.74, -74.18]">
  <marker ng-repeat="p in vm.positions"
    position="{{p.pos}}"
    /* NOTE THE USE OF ON-CLICK AND THE ANGULAR OBJECT BEING PASSED IN 
    THAT WILL ACTUALLY BE THE SECOND ARGUMENT FOR THE METHOD IN YOUR CONTROLLER */
    on-click="vm.logData(p)" 
    title="pos: {{p.pos}}"></marker>
</ng-map>

我在这里有一个演示：https://embed.plnkr.co/K5LZyF/

【讨论】：