Question

我正在使用此库在我的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 libary初始化地图的方法：

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中，事件未被触发，因为它未附加到地图对象。要将事件附加到地图对象，您需要使用events指令的ui-gmap-google-map属性，如下所示：

<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事件

1 个答案: