未在Google地图中获取JSON数组

时间:2017-08-29 14:13:48

标签: javascript html json

我是Javascript的初级用户,我正在尝试将数据导入地图,我的网址中有 Json数组列表。但是没有获取经度和纬度,我也尝试在控制台中打印它们但没有任何显示。

这是我的Json数据:

[{"Id":1,"Country":"Uganda","District":"kampala","SubCounty":"Hima","EpidemicName":"cholera","PatientName":"Michael","PatientResidenceArea":"Muhokya","Latitude":0.3249832,"Longitude":32.5753133,"HealthFacilityName":"Mulago","HealthOfficerName":"Fauziya"},{"Id":2,"Country":"Uganda","District":"Mbarara","SubCounty":"Mile","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"},{"Id":3,"Country":"Uganda","District":"Jinja","SubCounty":"kashaali","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"},{"Id":4,"Country":"Uganda","District":"Mbarara","SubCounty":"Mile","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"},{"Id":5,"Country":"Uganda","District":"Jinja","SubCounty":"kashaali","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"},{"Id":6,"Country":"Uganda","District":"Mbarara","SubCounty":"Mile","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"},{"Id":7,"Country":"Uganda","District":"Jinja","SubCounty":"kashaali","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"},{"Id":8,"Country":"Uganda","District":"Mbarara","SubCounty":"Mile","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"},{"Id":9,"Country":"Uganda","District":"Jinja","SubCounty":"kashaali","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"},{"Id":10,"Country":"Uganda","District":"Mbarara","SubCounty":"Mile","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"},{"Id":11,"Country":"Uganda","District":"Mbarara","SubCounty":"Mile","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"}]

以下是我的代码:

<body>
    <div id="map"></div>
    <script>
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 2,
                center: new google.maps.LatLng(2.8, -187.3),
                mapTypeId: 'terrain'
            });

            // Create a <script> tag and set the USGS URL as the source.
            var script = document.createElement('script');
            // This example uses a local copy of the GeoJSON stored at
            // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
            script.src = 'http://localhost:82/Mobile/Fetch.aspx?DataFormat=Details';
            document.getElementsByTagName('head')[0].appendChild(script);
        }

        // Loop through the results array and place a marker for each
        // set of coordinates.
        window.eqfeed_callback = function (results) {
            for (var i = 0; i < results.length; i++) {
                var coords = results.features[i].geometry.coordinates;
                var Ltd = results.Latitude[i];
                var Lgd = results.Longitude[i];
                console.log("Latitude : "+ Ltd+" Longitude : "+ Lgd);
                var latLng = new google.maps.LatLng(Ltd, Lgd);
                var marker = new google.maps.Marker({
                    position: latLng,
                    map: map
                });
            }
        }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAYol0DZtLxlMaLW6S7QZIQk48Do18cm6A&callback=initMap">
    </script>
  </body>

修改

这是我的更新 但是,即使我试图打印他们在控制台中没有显示的分数,为什么还不知道为什么它不带点数呢?

var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 2,
                center: new google.maps.LatLng(2.8, -187.3),
                mapTypeId: 'terrain'
            });

            // Create a <script> tag and set the USGS URL as the source.
            var script = document.createElement('script');
            // This example uses a local copy of the GeoJSON stored at
            // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
            script.src = 'http://192.168.0.6:72/Mobile/Fetch.aspx?DataFormat=Details';
            document.getElementsByTagName('head')[0].appendChild(script);
        }

        // Loop through the results array and place a marker for each
        // set of coordinates.
        window.eqfeed_callback = function (results) {
            for (var i = 0; i < results.length; i++) {

                var Ltd = results[i].Latitude;
                var Lgd = results[i].Longitude;
                console.log("Latitude : " + Ltd + " Longitude : " + Lgd);

                alert(""+ Ltd);
                var latLng = new google.maps.LatLng(Ltd, Lgd);
                var marker = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    label: results[i].EpidemicName
                });
            }
        }

1 个答案:

答案 0 :(得分:1)

window.eqfeed_callback函数有一些错误。它应该是这样的:

window.eqfeed_callback = function (results) {
    for (var i = 0; i < results.length; i++) {
        var Ltd = results[i].Latitude;
        var Lgd = results[i].Longitude;
        console.log("Latitude : "+ Ltd+" Longitude : "+ Lgd);
        var latLng = new google.maps.LatLng(Ltd, Lgd);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map
        });
    }
}

请注意,coords变量已被删除,因为它未被使用。此外,数组索引必须位于数组的名称之后,而不是在表达式的末尾,例如var Ltd = results[i].Latitude;而不是var Ltd = results.Latitude[i];

此外,initMap函数加载的脚本在加载时必须调用eqfeed_callback函数。这可以通过jQuery加载JSON来完成,如下所示:

$.getJSON('http://192.168.0.6:72/Mobile/Fetch.aspx?DataForma‌​t=Details', eqfeed_callback);

修改

要为每个标记添加标题,请执行以下操作:

var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    label: results[i].EpidemicName
});

有关详细信息,请参阅Google Maps API reference