web-dev-qa-db-ja.com

Angular-Google-Mapsにマーカーを追加する

Googleマップにクリック時にマーカーを追加する際に問題が発生しています。 http://angular-ui.github.io を使用しています。

これが私のコードです：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>

そして私の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();
            }
        }
    };

私はAngular-Google-Maps APIをフォローしていますが、Google Maps APIはまだ完全には優れていません。これまでのところ、私のクリックイベントは機能すると推定しましたが、マーカーがマップに追加されていません。助けていただければ幸いです。

javascriptangularjsgoogle-mapsgoogle-maps-api-3
12
Ren

fiddle を作成しました。こちらが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>

コントローラーはこんな感じ。

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

$ scope.map.marker.idに1つの初期値を指定する必要があるようです。そうしないと、以下のエラーが発生します。

gMarker.keyが未定義であり、必須です!!

5
rxing