1

我正在使用 NgMap 库在我的 Angular 应用程序中使用 google maps api。

我正在使用 ng-repeat 指令添加标记，每个指令都有一个单击标记，可调用控制器并记录到控制台。

<ng-map zoom="11" center="[40.74, -74.18]">
  <marker ng-repeat="p in vm.positions"
    position="{{p.pos}}"
    on-click="vm.showData(p)" //this is my on-click event, passing through the ng-repeated object
    title="pos: {{p.pos}}"></marker>
</ng-map>

出于某种原因，每次我将参数传递给我的控制器函数时，实际上传递的是标记对象，而不是我从视图传递的参数。

 vm.showData = function (marker, param){
      console.log(marker) //WHY IS MARKER BEING PASSED THROUGH?!
      console.log(param.name); //THE SECOND ARGUMENT IS THE ONE I WANT, WHY ISN'T IT THE FIRST?
 }

最终，在我的头撞到墙上之后，我决定检查是否有任何其他参数被传递给控制器​​函数。瞧，第二个论点是我一开始就希望通过的论点。

为什么第一个论点不是我所期待的？！它与 ngMap 库、角度有关，还是与我不知道的 JavaScript 细微差别有关？

可以在这里找到一个工作的 plunker：https ://embed.plnkr.co/TQpm4O/

4

1 回答 1

2

经过一番挖掘，它看起来像是NgMap 有意为之。这是一个事件，而不是标记本身。

从文档：

事件应用于地图、标记和形状。所有与事件相关的属性都以'on-'开头，即on-click、on-mouseover等

附带说明一下，要从 NgMap 获取实际的标记对象，您可以使用this.

所以你的代码也可以是这样的。

angular.module('ngMap').controller('MyCtrl', function() {
    var vm=this;
    vm.data =[
      {foo:1, bar:1},
      {foo:2, bar:2},
      {foo:3, bar:3},
      {foo:4, bar:4},
      {foo:5, bar:5},
      {foo:6, bar:6},
      {foo:7, bar:7}
    ];
    vm.positions =[
      {pos:[40.71, -74.21], name: "dave 1" },
      {pos:[40.72, -74.20], name: "dave 2" },
      {pos:[40.73, -74.19], name: "dave 3" },
      {pos:[40.74, -74.18], name: "dave 4" },
      {pos:[40.75, -74.17], name: "dave 5" },
      {pos:[40.76, -74.16], name: "dave 6" },
      {pos:[40.77, -74.15], name: "dave 7" }
    ];
    vm.showData = function (event){
      console.log(this.position.lat());
      console.log(this.position.lng());
      console.log(this.title);
    }
  });
<!DOCTYPE html>
<html ng-app="ngMap">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
</head>

<body>
  <div ng-controller="MyCtrl as vm">
    <ng-map zoom="11" center="[40.74, -74.18]">
      <marker ng-repeat="p in vm.positions"
        position="{{p.pos}}"
        on-click="vm.showData()"
        title="pos: {{p.name}}"></marker> 
        <!-- Changed p.pos to p.name --> 
        <!-- You can even remove p from vm.showData() -->
    </ng-map>
  </div>
</body>
</html>

于 2017-11-14T18:26:04.960 回答