4

我正在做一个角度项目。它包含一个谷歌地图使用angular-google-maps。所以在这张地图上,用户可以添加很多markers在角谷歌地图中使用鼠标移动标记

app.js

angular.module('mapAngular', ['uiGmapgoogle-maps']) 
    .controller('MainCtrl', function($scope) { 
     angular.extend($scope, { 
      map: { 
       center: { 
        latitude: 42.3349940452867, 
        longitude: -71.0353168884369 
       }, 
       zoom: 11, 
       markers: [], 
       events: { 
        click: function(map, eventName, originalEventArgs) { 
         var e = originalEventArgs[0]; 
         var lat = e.latLng.lat(), 
          lon = e.latLng.lng(); 
         var marker = { 
          id: Date.now(), 
          coords: { 
           latitude: lat, 
           longitude: lon 
          } 
         }; 
         $scope.map.markers.push(marker); 
         console.log($scope.map.markers); 
         $scope.$apply(); 
        } 
       } 
      } 
     }); 
    }); 

HTML

<div> 
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" events="map.events"> 
     <ui-gmap-marker ng-repeat="m in map.markers" coords="m.coords" icon="m.icon" idkey="m.id"></ui-gmap-marker> 
    </ui-gmap-google-map> 
</div> 

地图将显示所有添加markers.I需要一个功能,通过使用mouse.Please给我动态地移动这个标记这是一个有价值的指导方针? 感谢

Plunker

回答

1

通过对<ui-gmap-marker>指令给options="{draggable:true}"解决了这个问题。

<ui-gmap-marker ng-repeat="m in map.markers" coords="m.coords" icon="m.icon" idkey="m.id" options="{draggable:true}" > 
</ui-gmap-marker>