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

Question

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

我的目标是捕获用户用鼠标拖动地图时的事件。我查阅了 google 地图 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

Answer 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

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

set the dragend event in angular-google-maps

google-maps

google-maps-api-3

angularjs

angular-google-maps