javascript - AngularJS:如何在拖动 map 后获取标记的位置

Question

我有以下 CSS 在 map 上显示标记，用户现在可以像 Uber 一样拖动 map 我想获取标记的当前位置，我添加了 style.css ， DeliverCtrl.js 和 HTML 代码所以有人可以帮助我吗？

样式.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

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

Answer 1

从您提供的 css 代码来看，您试图在 map 上显示标记图像，同时在标记下方显示 map 。

在那种情况下，您可能想要的是在 map 拖动完成后获得 map 的中心。

要获取 map 的中心，您可以使用 map.getCenter() 函数。

要确定 map 何时完成拖动，您可以使用一些 google.maps.Map 的 User Interface Events (第一个例子)。在你的情况下，我更喜欢 idle 事件而不是例如center_changed 因为 get 被调用了更多次，但您可以自己从可用事件中进行选择。

所以你的代码应该看起来像这样:

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