Angular Google Maps/NodeJS：显示来自数据库的标记答案

【问题标题】：Angular Google Maps/NodeJS: Display Markers from DatabaseAngular Google Maps/NodeJS：显示来自数据库的标记
【发布时间】：2016-01-09 04:30:01
【问题描述】：

我正在使用 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;

 })

【问题讨论】：

标签： javascript angularjs node.js mongodb google-maps

【解决方案1】：

Here is an example 在地图上显示标记的工作原理。几点建议：

当显示多个标记时，使用ui-gmap-markers 指令而不是ng-repeating 单个标记指令。
同样，使用复数形式ui-gmap-windows 显示窗口。
markers 指令从您提供给它的对象键中读取坐标：<ui-gmap-markers coords="'coords'" ... > 从标记的coords 属性中读取坐标。其他属性也是如此，例如events、options 等。

我假设您的 LocFac.getLocations() 返回一个承诺 - 因此您的 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;
}

如果您在此之后仍然需要帮助，我很乐意提供一些帮助:)

【讨论】：