Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/444.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/25.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 角度谷歌地图/节点:显示数据库中的标记_Javascript_Angularjs_Node.js_Mongodb_Google Maps - Fatal编程技术网

Javascript 角度谷歌地图/节点:显示数据库中的标记

Javascript 角度谷歌地图/节点:显示数据库中的标记,javascript,angularjs,node.js,mongodb,google-maps,Javascript,Angularjs,Node.js,Mongodb,Google Maps,我正在用NodeJS和角度谷歌地图构建一个应用程序,以便在地图上显示来自MongoDB的一组数据/坐标。但是,我无法获取数据并显示它。如何更正代码以使其正常工作?下面是我的代码: 看法 <ui-gmap-google-map center='map.center' zoom='map.zoom'> <ui-gmap-marker ng-repeat="marker in markers" coords="'marker.latitude'

我正在用NodeJS和角度谷歌地图构建一个应用程序,以便在地图上显示来自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>
控制器

 .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
    ing单标记指令
  • 同样,使用复数版本
    ui-gmap-windows
    来显示窗口
  • markers指令从您提供给它的对象键读取坐标:
    从标记的
    coords
    属性读取坐标。其他属性也一样,如
    事件
    选项
  • 我假设您的
    LocFac.getLocations()
    返回一个承诺-因此您的
    Markers
    变量很可能没有正确分配。最好在
    中指定
    $scope.markers
    ,然后按如下方式回调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;
    }
    
如果在此之后您仍然需要帮助,我很乐意提供一些:)

$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;
}