在 angular-google-maps 中设置 dragend 事件答案

【问题标题】：set the dragend event in angular-google-maps在 angular-google-maps 中设置 dragend 事件
【发布时间】：2017-04-26 09:37:59
【问题描述】：

我正在使用这个库在我的 angularjs (v 1.2.15) webapp 中创建一个谷歌地图： https://angular-ui.github.io/angular-google-maps/#!/api/google-map

我的目标是捕捉用户用鼠标拖动地图时的事件。我查阅了google maps API文档，发现了dragend事件监听器：https://developers.google.com/maps/documentation/javascript/reference#Map

我能够初始化我的地图，但由于某种原因，我的 dragend 事件监听器不起作用。以下是我使用 angular-google-maps 库初始化地图的方法：

angular.module('appMaps', ['uiGmapgoogle-maps'])
  .controller('mainCtrl', function($scope, $log, $timeout) {
    angular.extend($scope, {
      map: {
        center: {
          latitude: 42.3349940452867,
          longitude: -71.0353168884369
        },
        zoom: 7,
        events: {
          dragend: function() {
            alert('the map was dragged by the user')
          }
        },
        markers: [],
        // ..
        // ..
    });
  });

这是我的 plunkr，除了 dragend 侦听器之外，一切都正常工作： http://plnkr.co/edit/AjnF4W5TB4cGSb59ete6?p=preview

【问题讨论】：

标签： angularjs google-maps google-maps-api-3 angular-google-maps

【解决方案1】：

在您的示例中，dragend 事件没有被触发，因为它没有附加到地图对象。要将事件附加到地图对象，您需要使用 ui-gmap-google-map 指令的 events 属性，如下所示：

<ui-gmap-google-map events="map.events" center="map.center" zoom="map.zoom" draggable="true" options="options">

在哪里

.controller('mainCtrl', function ($scope, $log, $timeout) {
        angular.extend($scope, {
            map: {

                events: {
                    dragend: function () {
                        alert('dragend')
                    }
                },
                //the remaining code is omitted for clarity
            }
        });
    });

Modified plunker

【讨论】：