在单击处理程序中获取标记：AngularJS + Google 地图

Question

我正在尝试在标记顶部显示信息窗口，但我遇到了困难。

目前我有以下HTML:

<map data-ng-model="mymap" zoom="4" center="[38.50, -95.00]">
  <marker ng-repeat="item in list" 
  position="[{{item.coordinates}}]" title="{{item.name}}" 
  icon="./images/i.png"
  on-click="onMarkerClicked(mymap, this)" />            

  <control name="overviewMap" opened="true" />
</map>`

然后，在相应的控制器中，我有：

$scope.onMarkerClicked = function(mymap, marker, event){

    infowindow = new google.maps.InfoWindow("Hi I am the MARKER" + event.target.title);
    infowindow.open( mymap, event.target );
    //infowindow.open( mymap, marker);
    $scope.$apply();
}

然而，mymap 具有正确的值，而 event.target 和标记（在报告的代码中注释）似乎不起作用

Cannot read property 'target' of undefined

使用标记时，未定义。我该如何解决这个问题？

Answer 1

您实际上应该将标记实例作为第二个参数传递给 open 调用。

看这里https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

Answer 2

您要将对象 this 作为参数发送并稍后命名该事件？最重要的是，如果您使用 Angular 为什么不使用 ng-click="onMarkerClicked(myMap, this, event)"。我从未以这种方式使用过 Google 地图，但在我看来，您的参数不知何故不正确。

看这个简单fiddle明白我的意思

http://jsfiddle.net/ozbafyhh/

<button onclick="myFunction(this, event)">Click me</button>

function myFunction (x, event){
    alert(x);
    alert(event);
}

Answer 3

我在 GitHub 那里看到了他们讨论这个问题的地方 - https://github.com/allenhwkim/angularjs-google-maps/issues/95

然后他们继续分享一个使用 ng-repeat 和 infoWindow 的例子 - https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/infowindow_compiled.html

看看那个页面上的源代码，我想它会对你有所帮助

在单击处理程序中获取标记：AngularJS + Google 地图

Getting the marker in on-click handler: AngularJS + Google Maps

javascript

google-maps

angularjs