AngularJS：如何拖動地圖

我有以下的CSS，顯示在地圖上標記，用戶可以拖動像尤伯杯的地圖，現在我想標記的當前位置後，即可獲取標記的位置，我已經加入style.css ，DeliverCtrl.js和HTML代碼，請有人能幫助我嗎？AngularJS：如何拖動地圖

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

我已經通過這個網站

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

來源

2017-04-20 maria salahuddin

你的意思是用戶拖動標記？因爲拖動地圖時，標記將保持相同的地址。 – Pengyy

@Pengyy用戶可以拖動地圖，並保持標記仍然停止時，用戶停止拖動地圖，然後我想獲得標記的位置。 –

從您提供的CSS代碼來看創建的地圖，你試圖在地圖上顯示標記圖像，同時在標記下方顯示地圖。

在這種情況下，你可能想要的是得到地圖的中心，地圖拖動結束後。

爲了讓你可以使用map.getCenter()功能地圖的中心。

，以確定何時地圖拖完，你可以使用一些google.maps.Map的User Interface Events（第一實例）。在你的情況下，我寧願idle事件，而不是例如。因爲那個被叫的次數更多，但是你可以自己選擇可用的事件。

所以，你的代碼也許應該是這個樣子：

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

來源

2017-04-20 12:13:34

謝謝這麼多：'）它的工作原理 –

AngularJS：如何拖動地圖

回答

相關問題