AngularJS ngMap 参数点击事件答案

【问题标题】：AngularJS ngMap parameters on-click eventAngularJS ngMap 参数点击事件
【发布时间】：2016-03-12 05:25:44
【问题描述】：

我正在尝试使用这个 Angular Google 地图指令http://ngmap.github.io/。我想为每个标记添加一个单击事件，该事件调用控制器中的一个函数，通过标记的 id 传递。当我在控制台中打印出 id 时，我得到“hq {latLng: wf, ub: undefined, pixel: undefined, xa: undefined}”，这不是 id。我的 HTML 是

<map center="{{map.center.latitude}},{{map.center.longitude}}" zoom="{{map.zoom}}">

                    <marker ng-repeat="marker in markers" position="{{marker.latitude}}, {{marker.longitude}}" icon="{{marker.icon}}" id="{{marker.id}}" on-click="goAnchor(marker.id)"></marker>
                </map>

我的控制器代码：

$scope.goAnchor = function (id) {
            console.log(id);
            gotoAnchor(id);
        };

【问题讨论】：

标签： javascript angularjs google-maps

【解决方案1】：

“this”返回你点击的标记

$scope.goAnchor = function (event) {
 console.log(this.id);
 gotoAnchor(this.id);
};

HTML

<marker ng-repeat="marker in markers" position="{{marker.latitude}},{{marker.longitude}}" icon="{{marker.icon}}" id="{{marker.id}}" on-click="goAnchor($event)"></marker>

【讨论】：

如何在此类回调函数中访问范围变量？我认为它是未定义的。

【解决方案2】：

你应该在函数中使用

$scope.goAnchor = function (event) {
   console.log(event.target.attributes.id.value);
   gotoAnchor(event.target.attributes.id.value);
};

标记

<marker ng-repeat="marker in markers" position="{{marker.latitude}}, {{marker.longitude}}" icon="{{marker.icon}}" id="{{marker.id}}" on-click="goAnchor($event)"></marker>

【讨论】：

这就是我的想法，但文档显示点击。 ngmap.github.io/events.html# 我试过 ng-click，它甚至不调用控制器，on-click 可以。
我从没见过on-click。但我想要在控制器的$scope 中传递函数的值，我们需要使用它的预定义指令。
还是没有运气。未捕获的类型错误：无法读取未定义的属性“属性”
@user1024941 我的错。请检查我编辑的答案。我忘了在on-click 中传递$event
让我们continue this discussion in chat.

【解决方案3】：

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

 <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);
        }

【讨论】：