角度谷歌地圖/ NodeJS：從數據庫顯示標記

我正在用NodeJS和Angular Google Maps構建一個應用程序，以將一組數據/座標從MongoDB顯示到地圖上。但是，我無法獲取數據並顯示它。我將如何更正代碼才能使其工作？下面是我的代碼：角度谷歌地圖/ NodeJS：從數據庫顯示標記

查看

<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>

JSON數據從API

[{"_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; 

})

來源

2016-01-09 Jeffrey Teruel

在地圖上是如何工作的顯示標記的Here is an example。一對夫婦指針：

當顯示多個標記，使用ui-gmap-markers指令，而不是ng-repeat荷蘭國際集團的單一標記指令。
同樣，使用複數版本ui-gmap-windows來顯示窗口。
markers指令從您提供給它的對象鍵讀取座標：<ui-gmap-markers coords="'coords'" ... >從標記的coords屬性讀取座標。這同樣適用於其他屬性，太像events，options等

我假設你LocFac.getLocations()回報的承諾 - 因此你Markers變量很可能是沒有得到正確分配。你離.then回調的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; 
}

如果您仍然需要在這之後的幫助，我會很樂意提供一些:)

來源

2016-01-09 10:13:31 Fissio

角度谷歌地圖/ NodeJS：從數據庫顯示標記

回答

相關問題