Thêm điểm đánh dấu trong Angular-Google-Maps

Question

Tôi hiện đang gặp sự cố khi thêm điểm đánh dấu khi nhấp vào Google Maps. Tôi đang sử dụng http://angular-ui.github.io.

Đây là mã của tôi: 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> 

Và có JS của tôi:

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

Tôi đã làm theo các API góc phải của Google-Maps, nhưng tôi không hoàn toàn xuất sắc tại API Google Maps. Cho đến nay, tôi đã suy luận rằng sự kiện nhấp chuột của tôi không hoạt động, nhưng điểm đánh dấu của tôi không được thêm vào bản đồ. Trợ giúp sẽ được đánh giá cao.

Answer 1

Tôi đã tạo fiddle. Đây 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> 

Bộ điều khiển là như thế này.

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

Có vẻ như bạn cần cung cấp $ scope.map.marker.id một giá trị init. Nếu không, lỗi dưới đây sẽ xảy ra.

gMarker.key undefined và nó được YÊU CẦU !!