Aggiungi marcatore in Angular-Google-Maps

Question

Attualmente sto riscontrando qualche problema nell'aggiunta di un indicatore sul clic su Google Maps. Sto usando http://angular-ui.github.io.

Ecco il mio codice: HTML:

<ui-gmap-google-map center='map.center' zoom='map.zoom' events="map.events"> 
    <ui-gmap-marker coords="map.marker.coords" idKey="map.marker.id"></ui-gmap-marker> 
</ui-gmap-google-map> 

E c'è la mia JS:

$scope.map = { 
    center: { 
     latitude: alat.value, longitude: alon.value }, 
     zoom: 15, 
     streetViewControl: false, 
     events: { 
      click: function (map, eventName, originalEventArgs) { 
       var e = originalEventArgs[0]; 
       var lat = e.latLng.lat(),lon = e.latLng.lng(); 
       $scope.map.marker = { 
        id: 1, 
        coords: { 
         latitude: lat, 
         longitude: lon 
        } 
       }; 
       $scope.$apply(); 
      } 
     } 
    }; 

ho seguito l'API angolare Google Maps, ma io non sono completamente eccellente all'API di Google Maps. Finora, ho dedotto che il mio evento click funziona, ma il mio marcatore non viene aggiunto alla mappa. L'aiuto sarebbe apprezzato

Answer 1

Ho creato il fiddle. Ecco l'HTML.

<div ng-app="main" ng-controller="mainCtrl"> 
    <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> 

Il controller è come questo.

angular.module('main', ['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(); 
      } 
     } 
     } 
    }); 
}); 

Answer 2

Sembra che sia necessario fornire $ scope.map.marker.id a un valore di init. In caso contrario, si verificherebbe l'errore di sotto.

gMarker.key undefined ed è OBBLIGATORIO !!