Javascript 角度谷歌地图/节点:显示数据库中的标记
我正在用NodeJS和角度谷歌地图构建一个应用程序,以便在地图上显示来自MongoDB的一组数据/坐标。但是,我无法获取数据并显示它。如何更正代码以使其正常工作?下面是我的代码: 看法Javascript 角度谷歌地图/节点:显示数据库中的标记,javascript,angularjs,node.js,mongodb,google-maps,Javascript,Angularjs,Node.js,Mongodb,Google Maps,我正在用NodeJS和角度谷歌地图构建一个应用程序,以便在地图上显示来自MongoDB的一组数据/坐标。但是,我无法获取数据并显示它。如何更正代码以使其正常工作?下面是我的代码: 看法 <ui-gmap-google-map center='map.center' zoom='map.zoom'> <ui-gmap-marker ng-repeat="marker in markers" coords="'marker.latitude'
<ui-gmap-google-map
center='map.center'
zoom='map.zoom'>
<ui-gmap-marker ng-repeat="marker in markers"
coords="'marker.latitude' + 'marker.longitude'"
options="marker.options"
events="marker.events"
idkey="marker.id">
<ui-gmap-window>
<div>{{marker.window.name}}</div>
</ui-gmap-window>
</ui-gmap-marker>
</ui-gmap-google-map>
控制器
.controller('MapCtrl', function($state, $scope, LocFac) {
var Markers = LocFac.getLocations().then(function(data) {
return data.data;
});
$scope.map = {
center: { latitude: 14.8282, longitude: 122.5795 },
zoom: 1
};
$scope.markers = Markers;
})
在地图上显示标记的工作原理。几点提示:
- 显示多个标记时,使用
指令,而不是ui-gmap-markers
ing单标记指令ng-repeat
- 同样,使用复数版本
来显示窗口ui-gmap-windows
- markers指令从您提供给它的对象键读取坐标:
从标记的
属性读取坐标。其他属性也一样,如coords
,事件
等选项
- 我假设您的
返回一个承诺-因此您的LocFac.getLocations()
变量很可能没有正确分配。最好在Markers
中指定
,然后按如下方式回调API调用:$scope.markers
$scope.markers = []; // init markers to empty array so angular-google-maps has something to draw markers from LocFac.getLocations().then(function(data) { var markers = data.data; angular.forEach(markers, function(marker) { // Assign 'coords' attribute here for the directive to read marker.coords = { latitude: marker.latitude, longitude: marker.longitude } }) $scope.markers = markers; }
$scope.markers = []; // init markers to empty array so angular-google-maps has something to draw markers from
LocFac.getLocations().then(function(data) {
var markers = data.data;
angular.forEach(markers, function(marker) {
// Assign 'coords' attribute here for the directive to read
marker.coords = {
latitude: marker.latitude,
longitude: marker.longitude
}
})
$scope.markers = markers;
}