2017-10-09 90 views
1

我在此地圖中有一個Google地圖Angular和掛載標記。 我希望標記隨地圖一起移動。在移動的那一刻,標記處於默認位置。我如何獲得移動標記並獲得當前位置的效果。Angularjs使用標記移動地圖並獲取位置當前標記

我的代碼:

<div class="col-lg-5 col-md-5 col-sm-12 col-xs-10 col-lg-offset-2 col-md-offset-1" style="padding: 0"> 
       <div ng-if="!mapLoaded" map-lazy-load="https://maps.google.com/maps/api/js" map-lazy-load-params="{{map.url}}" style="width: 100%;height:100%"> 
        <div ng-map center="{{map.center.latitude}},{{map.center.longitude}}" zoom="{{map.zoom}}" styles="{{ map.styles}}"> 
        </div> 
       </div> 
       <div ng-if="mapLoaded" class="map-dialog-container"> 
        <div ng-map center="{{map.center.latitude}},{{map.center.longitude}}" zoom="{{map.zoom}}" styles="{{ map.styles}}"> 
        </div> 
       </div> 
      </div> 

這是我的控制器:

$scope.map = { 
       zoom: 8, 
       center: { 
        latitude: 52.348763181988105, 
        longitude: 20.928955078125 
       }, 
       url: 'https://maps.googleapis.com/maps/api/js?key=XXX&callback=initMap', 

       NgMap.getMap().then(function (map) 
      { 
       var location = [52.348763181988105,20.928955078125]; 
       var infowindow = new google.maps.InfoWindow(); 

     var markerIcon = { 
      url: 'resource/img/mapin.png', 
      size: new google.maps.Size(32, 41), 
      anchor: new google.maps.Point(0, 41), 
      scaledSize: new google.maps.Size(32, 41), 
      labelOrigin: new google.maps.Point(16, 55) 
     }; 

       var latLng = new google.maps.LatLng(location[0],location[1]); 
       var newMarker = new google.maps.Marker({ 
       position: latLng, 
       map  : map, 
       icon : markerIcon 
      }); 
         console.log(newMarker.map); 
      }); 
+0

必須標記始終處於地圖的中心?或者它會始終處於與開始「默認」位置相同的相對位置? – dev8080

+0

是的,標記必須始終位於地圖的中心。 –

回答

0

設置在地圖上的center_changed的事件偵聽器。將標記的位置設置爲地圖的中心。

添加到您的JS:

map.addListener('center_changed', function() { 

     newMarker.setPosition(map.getCenter()); 

    }); 

對於標記的位置,你可以這樣做:

console.log(newMarker.getPosition()); 

或者更具體地說:

console.log("Lat:" + newMarker.getPosition().lat() + 
       "Lng:" + newMarker.getPosition().lng()); 
+0

不幸的是,標記保持在一個位置。標記不隨地圖移動 –

+0

它應該工作。你可以用你的代碼創建一個jsfiddle嗎? – dev8080

+0

https://jsfiddle.net/maTeX77/o52smuhd/1/ –

相關問題