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'> 
 
  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，经度：120.93313390000003，纬度：14.5571256，位置：马尼拉洲际酒店，类别：住宿， ：Hotel Intercon Manila，__ v：0，reviews：[]}，
 {_id：56873fdb182b3741059357d1，经度：123.76338959999998，纬度：10.2594266，地点 宿务市，名称：宿雾市，__ v：0，评论：[{comment：这是一个测试，评价：null，userId：null， ，纬度：14.5896977，位置：曼达鲁永，马尼拉，类别：经纬度：经度：经度：纬度：14.5896977，位置：tiGCG2rGroIn}]}，
 {_id：5687245aecdf89fb033b18b3 Accomodation，name：Mandaluyong，__ v：0，reviews：[]}] 
  

Controller

  .controller（'MapCtrl'，function（$ state，$ scope，LocFac）{$ b $ （函数（数据）{
返回data.data; 
}）; 
 
 $ scope.map = {
 center：{latitude：14.8282，longitude：122.5795}，
 zoom：1 
}; 
 
 $ scope.markers =标记; 
 
））
  

解决方案

< a href =https://plnkr.co/edit/AjNZGysuZCbSyYk9pUv8?p=preview =nofollow>下面是如何在地图上显示标记的示例。几个指针：

• 显示多个标记时，使用 ui-gmap-markers 指令而不是 ng-repeat 单个标记指令


• 同样，使用复数版本 ui-gmap-windows 来显示窗口。
  
• markers指令从您提供给它的对象键中读取坐标：< ; ui-gmap-markers coords ='coords'...> 从标记的 coords 属性中读取坐标。其他属性也一样，例如 events ，选项等。



• 我假设你的 LocFac.getLocations（）返回一个承诺 - 因此你的 Markers 变量很可能不是'没有正确分配。您最好在API调用的 .then 回调中分配 $ scope.markers ，如下所示：

    $ scope.markers = []; // init标记为空数组，所以angular-google-maps可以从
  绘制标记LocFac.getLocations（）。then（function（data）{
   var markers = data.data; 
   angular.forEach（markers，function（marker）{
   //在此指定'coords'属性以指示阅读
   marker.coords = {
   latitude：marker.latitude，
   longitude：marker.longitude 
  } 
  }）
   $ scope.markers = markers; 
  } 
     
   
   
   
   
   b
  I'm building an application with NodeJS and Angular Google Maps to display a set of data/coordinates from MongoDB onto the map. However, I'm unable to get the data and display it. How would I correct the code to make it work? Below is my code: 
  
  View  
  <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 Data from 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
   .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;
  
   })
  
  解决方案
  Here is an example of how displaying markers on the map works. A couple of pointers:
  
  
  When displaying multiple markers, use the ui-gmap-markers directive instead of ng-repeating the single marker directive.
  Similarly, use the plural version ui-gmap-windows to show the windows.
  The markers directive reads the coordinates from an object key you provide to it: <ui-gmap-markers coords="'coords'" ... > reads the coordinates from the coords attribute of your marker. Same goes for other attributes, too, like events, options etc.
  I assume your LocFac.getLocations() returns a promise - thus your Markers variable very likely isn't getting assigned correctly. You're better off assigning $scope.markers inside the .then callback of your API call as follows:
  $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;
  }
  
  
  
  If you still need help after this, I'll be happy to provide some :)
  
                          
  这篇关于Angular Google Maps / NodeJS：从数据库显示标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！