Question

我会非常感激能帮助我解决这条问题：我试图加载这个文件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);
})

我有以下JSON文件：是map-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尚未收到数据且未定义..

将此代码保留在请求的成功块中，或使用Promises在数据到达时执行代码。

像

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

})

错误加载json数据whit角度和谷歌地图

2 个答案: