AngularJS: Wie bekomme ich die Position der Markierung nach dem Ziehen einer Karte

Question

Ich habe das folgende CSS, das Marker auf der Karte zeigt, Benutzer kann eine Karte wie Uber jetzt ziehen Ich möchte die aktuelle Position des Markers erhalten, habe ich style.css hinzugefügt , DeliverCtrl.js und HTML code also bitte kann mir jemand helfen?

style.css

map{ 
    display: block; 
    width: 100%; 
    height: 50%; 
    overflow:visible; 
} 
map:after { 
    width: 22px; 
    height: 40px; 
    display: block; 
    content: ' '; 
    position: absolute; 
    top: 50%; left: 50%; 
    margin: -40px 0 0 -11px; 
    background: url('https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png'); 
    background-size: 22px 40px; /* Since I used the HiDPI marker version this compensates for the 2x size */ 
    pointer-events: none; /* This disables clicks on the marker. Not fully supported by all major browsers, though */ 
} 

DeliverCtrl.js

angular.module('Home').controller('DeliverCtrl',["$scope","$state", function($scope, $state, $ionicModal, MessageService, $stateParams) { 

    function initialize() { 
     var position = new google.maps.LatLng($state.params.lat,$state.params.lng); 

     $scope.mapOptions = { 
     mapTypeControl: true, 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: position 
    }; 

}; 

$scope.createMarker = function(latLng) 
{ 

    var map = $scope.map; 

    var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map, 
     title: 'Current Location' 
    }); 
}; 

$scope.mapCreated = function(map) { 
    $scope.map = map; 
}; 

initialize(); 
google.maps.event.addDomListener(window, 'load', initialize); 
}]); 

Ich habe die Karte durch diese HTML erstellt

<map on-create="mapCreated(map)" mapoptions="mapOptions"></map> 

Answer 1

aus dem CSS-Code zu urteilen Sie zur Verfügung gestellt , Sie versuchen, ein Markerbild über der Karte zu zeigen, während die Karte unter der Markierung angezeigt wird.

In diesem Fall, was Sie wahrscheinlich wollen, ist es, das Zentrum der Karte zu bekommen, nachdem das Ziehen der Karte beendet wurde.

Um die Mitte der Karte zu erhalten, können Sie map.getCenter() Funktion verwenden.

Um festzustellen, wann die Karte fertig gezogen wurde, können Sie einige der google.maps.MapUser Interface Events (erstes Beispiel) verwenden. In Ihrem Fall würde ich idle Ereignis anstelle von z. center_changed seit dem wird mehrmals aufgerufen, aber Sie können aus den verfügbaren Ereignissen selbst wählen.

So sollte der Code wahrscheinlich so etwas wie folgt aussehen:

$scope.mapCreated = function(map) { 
    $scope.map = map; 
    $scope.current_center = null; 
    google.maps.event.addListener($scope.map, 'idle', function(){ 
     $scope.current_center = $scope.map.getCenter(); 
     console.log($scope.current_center.toString()); //this will print out latitude and longitude of map's center after dragging/zooming finished 
    }); 
};