(angularjs-google-maps) ng-click 内部标记答案

【问题标题】：(angularjs-google-maps) ng-click inside marker(angularjs-google-maps) ng-click 内部标记
【发布时间】：2014-08-20 02:05:41
【问题描述】：

这个问题是关于angularjs-google-maps，https://github.com/allenhwkim/angularjs-google-maps

有没有办法在标记上使用 ng-click 来设置这样的变量？（值 1 是硬编码的，用于测试目的）。单击标记当前似乎不会触发 ng-click。

<marker ng-repeat="instance in common.instances" 
 position="[{{instance.lat}},{{instance.lng}}]" 
 ng-click="common.selectedinstance = 1">
</marker>

【问题讨论】：

标签： angularjs google-maps angularjs-directive angularjs-google-maps

【解决方案1】：

来自他们的文档，https://developers.google.com/maps/documentation/javascript/events，

用户事件（例如“单击”鼠标事件）从 DOM 传播到谷歌地图 API。这些事件与标准 DOM 事件。

据我了解，只有 google maps 事件可以应用于 google maps 对象，包括标记、形状等。

那是个坏消息。

好消息是您仍然可以使用on-click 事件来操作$scope 变量和事件。只要您为此事件使用函数，就没有太大区别。

我会继续调查是否有解决方法，以便我们可以使用 AngularJS 事件进入（即 ngMouseenger、ngMouseleave.ngMouseup、ngClick 等

plunkr 上有一个使用 on-click 的工作示例来满足您的要求。

http://plnkr.co/edit/6qvS0vUYkqVHZ3t6qmn2?p=preview

这是脚本部分

  $scope.myVar = 1;
  $scope.changeMyVar = function(event) {
    $scope.myVar+=1;
    $scope.$apply();
  }

这是html部分

  <map zoom="11" center="[40.74, -74.18]">
    <marker ng-repeat="p in positions" 
      position="{{p}}" title="{{p.toString()}}"
      on-click="changeMyVar()">
    </marker>
  </map>
  myVar : {{myVar}}  Click a marker to increase myVar

要了解更多有关 angularjs-google-maps 事件的信息，请查看the example about event

【讨论】：

@AntoineCloutier，感谢您的报告。我做了一个修复。

【解决方案2】：

我使用下面的代码来获取点击标记的纬度和经度。

HTML：

   <ng-map zoom="12" center="{{vm.geoCenterLoc}}" style="height:500px">
            <marker ng-repeat="p in vm.positions"
                    position="{{p.pos}}"
                    data="{{data[$index]}}"
                    on-click="myFunc($event)";
                    title="pos: {{p.pos}}"></marker>
   </ng-map>

Javascript（在我的控制器上）：

 $scope.myFunc = function (evt) {

            markerPosObj = {
                pos: [this.getPosition().lat(), this.getPosition().lng()]
            };
            markerPos = [];
            markerPos.push(markerPosObj);
            console.log('this marker', markerPos);
        }

【讨论】：