javascript 在 Angular-Google-Maps 中添加标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30910883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add Marker in Angular-Google-Maps
提问by Jayram
I'm currently having some trouble adding a marker on click to Google Maps. I'm using http://angular-ui.github.io.
我目前在点击 Google 地图时添加标记时遇到了一些问题。我正在使用http://angular-ui.github.io。
Here is my code: HTML:
这是我的代码：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>
And there is my JS:
还有我的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();
}
}
};
I've been following the Angular-Google-Maps API, but I'm not entirely excellent at the Google Maps API as yet. So far, I've deduced that my click event does work, but my marker is not being added to the map. Help would be appreciated.
我一直在关注 Angular-Google-Maps API，但我在 Google Maps API 方面还不是很出色。到目前为止，我已经推断出我的点击事件确实有效，但我的标记没有被添加到地图中。帮助将不胜感激。
回答by Jayram
I have created the fiddle. Here is the HTML.
我已经创建了小提琴。这是 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>
The controller is like this.
控制器是这样的。
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();
}
}
}
});
});
回答by rxing
It seems you need give $scope.map.marker.id one init value. Otherwise, below error would occur.
看来您需要给 $scope.map.marker.id 一个初始值。否则会出现以下错误。
gMarker.key undefined and it is REQUIRED!!
gMarker.key 未定义，它是必需的！！
