AngularJS:如何在拖动地图后获得标记的位置

Question

我有下面的CSS显示标记在地图上，用户可以拖动一个地图像优步现在我想得到标记的当前位置，我已经添加了style.css，DeliverCtrl.js和HTML代码，所以请谁能帮助我？

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); 
}]);

我通过这个html创建了地图。

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

Answer 1

从您提供的css代码判断，您试图在地图上显示标记图像，同时在标记下面显示地图。

在这种情况下，您可能想要的是在地图拖动完成后得到地图的中心。

要获得地图的中心，可以使用map.getCenter()函数。

要确定地图何时完成拖放，您可以使用google.maps.Map的一些用户界面事件 (第一个示例)。在您的示例中，我更喜欢idle事件，而不是center_changed，因为调用该事件的次数更多，但您可以自己选择可用的事件。

因此，您的代码可能应该如下所示：

$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
    });
};