2017-03-17 76 views
-1

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

我该如何做到这一点?

查看

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

回答

0

根据the documentationdragend事件不接受任何参数:

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>