Angular Google Maps/NodeJS:显示数据库中的标记
Angular Google Maps/NodeJS: Display Markers from Database
我正在使用NodeJS和Angular Google Maps构建一个应用程序,以在地图上显示MongoDB的一组数据/坐标。但是,我无法获取数据并显示它。如何更正代码以使其工作?以下是我的代码:
查看
<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>
来自API 的JSON数据
[{"_id":"5686389d2959b4c601fbd9e7","longitude":120.93313390000003,"latitude":14.5571256,"location":"Hotel Intercontinental Manila","category":"Accomodation","name":"Hotel Intercon Manila","__v":0,"reviews":[]},
{"_id":"56873fdb182b3741059357d1","longitude":123.76338959999998,"latitude":10.2594266,"location":"Cebu City","name":"Cebu City","__v":0,"reviews":[{"comment":"This is a test","rating":null,"userId":null,"review_id":"tiGCG2rGroIn"}]},
{"_id":"5687245aecdf89fb033b18b3","longitude":121.0212325,"latitude":14.5896977,"location":"Mandaluyong, Manila","category":"Accomodation","name":"Mandaluyong","__v":0,"reviews":[]}]
控制器
.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
指令,而不是使用单个标记指令的ng-repeat
- 类似地,使用多个版本的
ui-gmap-windows
来显示窗口 - marks指令从您提供给它的对象键中读取坐标:
<ui-gmap-markers coords="'coords'" ... >
从标记的coords
属性中读取坐标。其他属性也是如此,如events
、options
等 -
我假设您的
LocFac.getLocations()
返回了一个promise,因此您的Markers
变量很可能没有被正确分配。您最好在API调用的.then
回调中分配$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; }
如果您在这之后仍然需要帮助,我很乐意提供一些:)
相关文章:
- PHP:显示sqlite数据库中的html格式数据,使用tinymce保存
- AJAX,用于显示数据库数据
- 谷歌地图-数据库中的标记只显示最后一行的信息
- 以html形式显示sqlite数据库中的数据(phonegap)
- 显示给定半径内数据库中的所有位置
- 当用户键入一封信时,如何使用ajax自动完成来显示MySQL数据库中的值
- 使用模式消息/窗口显示数据库记录
- 尝试显示使用 php 和数据库检索的缩略图中的全尺寸图像
- 使用 jQuery UI 折叠面板显示 couchDB 数据库搜索结果时出现问题
- 使用自动完成文本框从mysql数据库获取表记录并显示在文本字段中
- 从下拉框中选择用户信息,并使用进度计数器显示数据库中的选定项目
- 无限滚动:从数据库加载所有数据并滚动以显示更多
- 如何在每次在 php 中单击提交时逐个显示数据库中的项目
- 错误:通过ajax(从数据库)显示注释(laravel 5.2)
- PHP/Javascript -在while循环中从mysql数据库显示谷歌地图上的标记
- 通过servlet将数据从数据库显示到完整日历—没有列出事件
- 使用javascript从parse.com数据库显示图像的简单方法
- 当主id发生变化时,如何从数据库显示详细信息
- 使用php/javascript从mysql数据库显示谷歌地图上的标记
- 使用javascript从数据库显示