【问题标题】:ng-map: How can I get the Marker object when I click it?ng-map:单击时如何获取 Marker 对象?
【发布时间】:2016-01-31 11:07:06
【问题描述】:

我正在使用非常酷的 ng-map 角度库,我想知道如何访问由 ng-map ma​​rker 指令引用的底层标记对象

所以,我有这个标记:

<div id="map-search" data-tap-disabled="true">
  <map zoom="15" disable-default-u-i="true">
    <marker ng-repeat=" pos in positions" position="{{pos.latitude}}, {{pos.longitude}}" id="{{pos.index}}" on-click="pinClicked()">
    </marker>
  </map>
</div>

在这种情况下,我还没有找到在点击事件期间访问 Google 地图标记对象的直接方法;从控制器:

  app.controller('MapSearchController', function($scope) {

      $scope.$on('mapInitialized', function(event, map) {
        $scope.map = map;
        //Assume existence of an Array of markers
        $scope.positions = generatePinPositionsArray();
      });

      $scope.pinClicked = function(event, marker) {
        console.log('clicked pin!');
        //HOW CAN I GET THE MARKER OBJECT (The one that was clicked) HERE?
        console.log('the marker ->', marker); //prints undefined
      };
  });

提前致谢,

【问题讨论】:

  • 您确定:on-click="pinClicked()" 对应于$scope.pinTouched。你调用的不是同一个函数!
  • 糟糕!,我的错。更正。当然应该是同样的方法。

标签: angularjs google-maps google-maps-api-3 ng-map


【解决方案1】:

this 是访问市场对象的答案。它与谷歌地图 api 完全一样,没有什么不同。再次在点击功能中使用this

----- 编辑-----

testapp 目录下有很多例子,当你发现 ng-map 的用法时很有用。

$scope.foo = function(event, arg1, arg2) {
  alert('this is at '+ this.getPosition());
  alert(arg1+arg2);
}

例子:

https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/events.html

【讨论】:

  • 谢谢您,先生。您能否进一步说明控制器功能的外观?控制器内部函数的签名是什么样的? (类似于:pinClicked(marker){...})?
  • 非常感谢您,正是我所需要的,先生!继续努力!
【解决方案2】:

您需要创建一个标记数组!这是(在我看来)唯一的方法。见here

更新:像 plunkr 这样的东西对你有用吗?

这个想法是在事件on-click="pinClicked(this)" 上传递标记。然后你可以稍后在控制器上捕获它:$scope.pinClicked = function(events, marker) {...}

【讨论】:

  • 嗨@robe007,我希望它像那样简单,在您的示例中,您从一组标记中选择第一个标记,(因此,您保留对 Marker 对象的引用多变的)。就我而言,我也有一个标记数组,但可以单击其中任何一个,不一定是第一个。
  • 这很不幸,我想避免必须按照您刚刚链接的答案执行操作。以这种方式添加事件监听器很麻烦。尽管如此,还是感谢您的友好回复! -真诚的。
  • 我更新了我的答案。希望这可以帮助你。致敬!
  • 很好的答案!由于您的回答比@allenhwkim 先,我会给您“接受”(尽管他的回答可能被认为更好
  • 太棒了!已经为此苦苦挣扎了一段时间。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-10-18
  • 2019-11-17
  • 2015-08-31
  • 1970-01-01
  • 1970-01-01
  • 2019-06-04
  • 2020-04-08
相关资源
最近更新 更多