【问题标题】:$http angularJS loop for each object with leaflet issue带有传单问题的每个对象的 $http angularJS 循环
【发布时间】:2015-07-27 19:06:19
【问题描述】:

我正在为 AngularJS 个人培训制作一个小应用程序,但出现了一些错误。

我从 API 接收 Json 数据,然后我想为我得到的每个对象显示一个标记。问题是我有一个控制台错误,所以我想我犯了一个错误。

这是我的控制器

toulouseVeloControllers.controller('toulouseVeloListCtrl', ['$scope', '$http',
  function($scope, $http) {

      angular.extend($scope, {
          osloCenter: {},
          markers: {},
          defaults: {
              scrollWheelZoom: false
          }
      });


      $http.get('https://api.jcdecaux.com/vls/v1/stations?contract=toulouse&apiKey=*********************************').success(function(data) {

          $scope.bornes = data;

          for (var i = 0; i < data.length; i++) {

              $scope.markers.osloMarker = {
                  lat: data[i].position.lat,
                  lng: data[i].position.lng,
                  message: data[i].name,
                  focus: true,
                  draggable: false
              };
              $scope.osloCenter = {
                  lat: data[1].position.lat,
                  lng: data[1].position.lng,
                  zoom: 15
              };
          }

          console.log(data.position.lat);
          console.log(data.position.lng);
      });
  }]);

在我的地图中,我只有最后一个对象的标记。在控制台中我有“TypeError:无法读取未定义的属性'lat'”

当我尝试使用 ng-repeat 在列表中显示地图之外的所有对象时,我没有问题。

这里是我的 HTML:

<div ng-controller="toulouseVeloListCtrl">
    <leaflet markers="markers" center="osloCenter" style="width: 100%; height: 500px;"></leaflet>
</div>

知道什么是错的吗?

非常感谢!!


【问题讨论】:

    标签: javascript html angularjs dictionary leaflet


    【解决方案1】:

    我猜这个问题是:

    console.log(data.position.lat); 
    

    也许你应该使用:

    console.log(data[i].position.lat);
    

    还有:

    $scope.markers=[];
    $scope.osloCenter=[];
    for (var i = 0; i < data.length; i++) {
    
              $scope.markers[i].osloMarker = {
                  lat: data[i].position.lat,
                  lng: data[i].position.lng,
                  message: data[i].name,
                  focus: true,
                  draggable: false
              };
              $scope.osloCenter[i] = {
                  lat: data[1].position.lat,
                  lng: data[1].position.lng,
                  zoom: 15
              };
          }
    

    【讨论】:

    • 谢谢,问题在控制台中消失了,但标记没有。我仍然只有最后一个对象...
    猜你喜欢
    • 2023-04-09
    • 1970-01-01
    • 2020-02-26
    • 1970-01-01
    • 2011-07-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多