2017-03-17 115 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>