エラーロードJSONデータは、角度聖霊降臨祭とGoogleは私がこれをした。このラインで私を助けることができる人は非常に感謝されるでしょう

Question

マッピングします 私は、このファイルのJSONをロードしようとしていますが、私にJSONマーカー

が表示されません私は、次のJSONファイルを持っている

var app = angular.module("app", ["ngResource"]); 
app.controller("appController", function ($scope, $http) { 

    var jsonData=[]; 
    $http.get('json/map-data.json').success(function (data) { 
     jsonData = data.church; 
    }); 
    var coordenadas={ 
     lat:4.600293, 
     lng:-74.175458 
    } 
    // recupero la posicion 
    maPro = function(){ 
     var contain = document.getElementById('mapa'); 
     var position={ 
      center:coordenadas, 
      zoom:10, 
     } 
     $scope.map= new google.maps.Map(contain, position); 
    } 

    $.each(jsonData, function(key, data){ 
     var latLng = new google.maps.LatLng(data.lat, data.lng) 
     var marker = new google.maps.Marker({ 
       Title:data.nombre, 
       position:latLng, 
       animation:google.maps.Animation.BOUNCE 
     })  
    }) 
    google.maps.event.addDomListener(window, 'load', maPro); 
}) 

は：マップ-data.json

{ 
    "church":[ 

     { "nombre":"ipuc brasilia", 
      "pastor":"pastor brasilia", 
      "telefono":"320 5559977", 
      "lat":4.6309497, 
      "lng":-74.1821257 
     } 
    ] 
} 

Answer 1

`$http.get('json/map-data.json').success(function (data) { 
     jsonData = data; 
    });` 

これはASYN要求（Jsとdosenであり; tは、データを待ち、残りのコードを実行します。 ）したがって、jsがこれを実行している間に

$.each(jsonData, function(key, data){ 
     var latLng = new google.maps.LatLng(data.lat, dat.lng) 
     var marker = new google.maps.Marker({ 
       Title:data.nombre, 
       position:latLng, 
       animation:google.maps.Animation.BOUNCE 
     })  
    }) 

jsonDataがデータを受信し、定義されていないいない...

あなたの要求または使用の成功ブロック内でこのコードを保管してくださいデータが到着したときにコードを実行することを約束。

var app = angular.module("app", ["ngResource"]); 
app.controller("appController", function ($scope, $http) { 

    var jsonData=[]; 
    $http.get('json/map-data.json').success(function (data) { 
     jsonData = data.church; 

     var coordenadas={ 
     lat:4.600293, 
     lng:-74.175458 
    } 
    // recupero la posicion 
    maPro = function(){ 
     var contain = document.getElementById('mapa'); 
     var position={ 
      center:coordenadas, 
      zoom:10, 
     } 
     $scope.map= new google.maps.Map(contain, position); 
    } 

    $.each(jsonData, function(key, data){ 
     var latLng = new google.maps.LatLng(data.lat, dat.lng) 
     var marker = new google.maps.Marker({ 
       Title:data.nombre, 
       position:latLng, 
       animation:google.maps.Animation.BOUNCE 
     })  
    }) 
    google.maps.event.addDomListener(window, 'load', maPro); 
    }); 

}) 

Answer 2

同様

このそのコード最終的な

var app = angular.module("app", ["ngResource"]); 
app.controller("appController", function ($scope, $http) { 

    var coordenadas={ 
     lat:4.600293, 
     lng:-74.175458 
    } 

    maPro = function(){ 
     var contain = document.getElementById('mapa'); 
     var position={ 
      center:coordenadas, 
      zoom:10, 
     } 
     $scope.map= new google.maps.Map(contain, position); 

     $http.get('json/map-data.json').success(function (responseData) { 
      $scope.datos = responseData.iglesias; 
      $.each($scope.datos, function(key, data){ 
       var latLng = new google.maps.LatLng(data.lat, data.lng) 
       addMarker($scope.map, latLng) 
      }) 
     }) 

    } 
     google.maps.event.addDomListener(window, 'load', maPro); 

    addMarker = function(mapa, location){ 
     var marker = new google.maps.Marker({ 
      position:location, 
      map: mapa 
     }) 
    } 

})