Question

我有以下CSS在地图上显示标记，用户可以拖动像Uber这样的地图现在我想获得标记的当前位置，我添加了style.css，DeliverCtrl.js和{{ 1}}代码所以请任何人帮助我吗？

的style.css

HTML

DeliverCtrl.js

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 */
}

我已通过此html

创建了地图

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

Answer 1

根据您提供的CSS代码判断，您试图在地图上显示标记图像，同时在标记下方显示地图。

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

要获得地图的中心，您可以使用map.getCenter()功能。

要确定地图何时完成拖动，您可以使用部分google.maps.Map User Interface Events（第一个示例）。在您的情况下，我希望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
    });
};

AngularJS：拖动地图后如何获取标记的位置

1 个答案: