Javascript 在谷歌地图中添加标记

我目前在谷歌地图上添加点击标记时遇到了一些问题。我正在使用

这是我的密码： HTML:

我一直在关注谷歌地图API，但我对谷歌地图API还不是很在行。到目前为止，我推断我的点击事件确实有效，但我的标记没有被添加到地图中。非常感谢您的帮助。

我已经创建了。这是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>

---

似乎需要给$scope.map.marker.id一个init值。否则，将发生以下错误

---

gMarker.key未定义，它是必需的

太好了！正是我需要的。我添加了$scope.map.markers.pop（）；你能解释一下为什么这样做吗？为什么要使用

angular.extend（）

？我可以在指令中添加click=“”，但click（）不起作用吗？从Firebase加载标记信息时，我遇到了相同的问题。诀窍是在将标记添加到范围后添加

$scope.$apply（）

。

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

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