Question

我有这个代码，相同的javascript函数，我用来创建一个带有userMarker的谷歌地图和相同的图标，将在地图初始化时加载。图标的数量和它们的位置和infowindow数据是未知的，所有数据都将从外部json文件中获取

这是代码：

var oggetto = $.getJSON("eventi.json", function (data) {
    oggetto = data;
});


function initialize() {
    var dueTorri = new google.maps.LatLng(44.493392, 11.346129);
    var myOptions = {
        zoom: 14,
        center: dueTorri,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("main"), myOptions);

    var userMarker = new google.maps.Marker({
        map: map,
        draggable: true,
        title: "Tu sei qui",
        position: dueTorri,
        icon: "marker/marker_eccoti.png"
    });
    google.maps.event.addListener(userMarker, 'dragend', function (event) {
        var newLatLong = userMarker.getPosition()
        map.panTo(newLatLong);
        var lati = newLatLong.lat();
        var longi = newLatLong.long();
    });

    setIcons(map, oggetto);
}


function setIcons(map, dati) {
    for (var i = 0; i < dati.events.length; i++) {
        var areaEventi = dati.events[i];
        var idEvento = areaEventi.event_id;
        var tipo = areaEventi.type.type;
        var sottotipo = areaEventi.type.subtype;
        var descrizioni = new Array();
        for (var j = 0; j < areaEventi.description.length; j++) {
            descrizioni[j] = areaEventi.description[j];
        }
        var tempoIniziale = areaEventi.start_time;
        var tempoUltima = areaEventi.freshness;
        var stato = areaEventi.status;
        var attendibilita = areaEventi.reliability;
        var numeroNotifiche = areaEventi.number_of_notifications;
        var lat_luogo = areaEventi.locations.lat;
        var lng_luogo = areaEventi.locations.lng;
        var myLatLng = new google.maps.LatLng(lat_luogo, lng_luogo);
        if (tipo == "problemi_ambientali") {
            var icon_image = {
                url: 'marker/marker_ambiente.png'
            };
        }
        if (tipo == "reati") {
            var icon_image = {
                url: 'marker/marker_reato.png'
            };
        }
        if (tipo == "eventi_pubblici") {
            var icon_image = {
                url: 'marker/marker_evento.png'
            };
        }
        if (tipo == "emergenze_sanitarie") {
            var icon_image = {
                url: 'marker/marker_soccorsi.png'
            };
        }
        if (tipo == "problemi_stradali") {
            var icon_image = {
                url: 'marker/marker_strada.png'
            };
        }


        var icone = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: icon_image,
            title: tipo,
            zIndex: i

        });
        var contentString = '<div>' +
            '<h3 id="tipologia">' + tipo + '</h3>' +
            '<h4 id="subtipo">' + sottotipo + '</h4>' +
            '<table>' +
            ' <tr>' +
            ' <td id="commento1">' + descrizioni[0] + '</td>' +
            '</tr>' +
            ' <tr>' +
            '<td id="commento2">' + descrizioni[1] + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td id="commento3">' + descrizioni[2] + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td id="commento4">' + descrizioni[3] + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td id="commento5">' + descrizioni[4] + '</td>' +
            '</tr>' +
            '</table>' +
            '<form method="post" action="">' +
            '<p><input type="radio" name="status" value="Open" />Open<input type="radio" name="status" value="Closed" />Closed</p>' +
            '<p>Descrizione:<input type="text" name="descrizione" /></p>' +
            '<p><input type="submit" name="submit" value="Aggiorna" /></p>' +
            '</form>' +
            '</div>';
        var infowindow = new google.maps.InfoWindow();

        bindInfoW(icone, contentString, infowindow);

        function bindInfoW(icone, contentString, infowindow) {
            google.maps.event.addListener(icone, 'click', function () {
                infowindow.setContent(contentString);
                infowindow.open(map, icone);

            });

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

这是json的一个例子，有2个事件：

{
    "request_time": 1368095111,
    "result": "Messaggio di servizio",
    "from_server": "",
    "events": [
        {
            "event_id": "902438",
            "type": {
                "type": "problemi_stradali",
                "subtype": "incidente"
            },
            "description": ["ommioddio", "come na catapulta", "", "", ""],
            "start_time": 1368045665,
            "freshness": 1368085800,
            "status": "open",
            "reliability": 0.8,
            "number_of_notifications": 2,
            "locations": {
                "lat": 37.42291810,
                "lng": -122.08542120
            }

            },
        {
            "event_id": "459459",
            "type": {
                "type": "problemi_stradali",
                "subtype": "incidente"
            },
            "description": ["mi hanno tamponato", "dottore chiami un dottore", "che guaio", "descr4", "descr5"],
            "start_time": 1368105698,
            "freshness": 1368106058,
            "status": "open",
            "reliability": 1.0,
            "number_of_notifications": 4,
            "locations": {
                "lat": 37.42291810,
                "lng": -122.08542120
            }

         }
    ]
}

我使用easyPhP来加载html文件，但是当它加载时，除了图标之外都有。谁知道问题是什么？感谢

Answer 1

这段代码是你的问题：

var oggetto = $.getJSON("eventi.json", function(data) {
    oggetto = data;
});

您不能指望oggetto之后包含数据 - 它将只包含请求对象，将来可能会被覆盖。请参阅How do I return the response from an asynchronous call?。

相反，在加载setIcons时，在回调中调用data。

Answer 2

{{2p>你也可以参考 {{3P>

json文件的get方法问题

2 个答案: