2017-03-17 23 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 documentationによると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>

関連する問題