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

error load json data whit angular and google maps

本文关键字：谷歌地图 数据 加载 json 错误      更新时间：2023-09-26

我将非常感激谁能帮助我这一行，我有这个:我试图加载这个文件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文件:

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


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

这是一个异步请求(Js将等待数据并执行其余代码…)所以，当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);
    });
})

这是最后的代码和工作

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   
        })
    }   
})
相关文章：