簡體   English   中英

$ http angularJS循環的每個對象與傳單問題

[英]$http angularJS loop for each object with leaflet issue

我正在為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>

知道什么是錯的嗎?

非常感謝 !!


我想這個問題是:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM