[英]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
显示窗口。 <ui-gmap-markers coords="'coords'" ... >
从您的标记的coords
属性读取坐标。 其他属性也是如此,例如events
, options
等。 我假设您的LocFac.getLocations()
返回一个诺言-因此您的Markers
变量很可能没有正确分配。 你最好分配$scope.markers
里面.then
你的API调用回调函数如下:
$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; }
如果您在此之后仍然需要帮助,我们将很乐意为您提供一些帮助:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.