NgMap 可拖动位置

Question

我想获取地图的可拖动位置。我在 ng-map 上设置了 on-dragend，但事件没有返回位置，因为地图本身没有位置。我计划在地图中心创建隐藏的自定义标记。拖动地图时，标记也会移动/拖动。调用 on-dragend 时，该隐藏自定义标记的当前位置将相应更新。

我怎样才能做到这一点？

视图

<ng-map center="{{ latitude }}, {{ longitude }}" 
          zoom="14" 
          on-dragend="dragEnd()">
    <marker icon="{{customIcon}}" position="{{ latitude }}, {{ longitude }}">
    </marker>
</ng-map>

控制器

$scope.dragEnd = function (e) {
    console.log("EVENT: " + event); // EVENT undefined
}

Answer 1

根据文档，dragend事件不接受任何参数：

dragend

参数：无 当用户停止拖动 地图。

相反，您可以考虑在拖动地图后根据当前地图属性更新标记(例如，通过使用getCenter()函数获取地图中心(：

$scope.dragEnd = function () {
   $scope.pos = [$scope.map.getCenter().lat(),$scope.map.getCenter().lng()];
};

例

angular.module('plunker', ['ngMap'])
    .controller('MainCtrl', ['$scope', 'NgMap',
        function ($scope,NgMap) {
            NgMap.getMap().then(function (map) {
                $scope.map = map;
            });
            $scope.center = [45.026950, 15.205764];
            $scope.pos = [45.026950, 15.205764];
            $scope.dragEnd = function () {
                $scope.pos = [$scope.map.getCenter().lat(),$scope.map.getCenter().lng()];
            };
        }]);

<script src="https://code.angularjs.org/1.6.0/angular.js"></script>
<script src="//maps.google.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
  <ng-map center="{{center}}" zoom="5" on-click="getpos($event)" on-dragend="dragEnd()" style='width: 100%; margin: 15px;'>
    <marker position="{{pos}}"  animation="Animation.BOUNCE" animation="DROP"></marker>
  </ng-map>
</div>