2017-08-29 4 views
2

JavaScriptを使用しています。にデータをインポートすると、Json配列リストが私のURLから取得されています。経度と緯度は取得されず、コンソールで印刷しようとしましたが、何も表示されません。JSON配列がGoogle Mapsで取得されない

これは私の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> 

EDIT:

これは私の更新ですしかし、なぜ私は彼らがコンソールに表示されない点を印刷しようとするときにポイントをもたらすことがわからない理由は?

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

window.eqfeed_callback機能にエラーがあります。それは次のようになります。それは未使用ですのでcoords変数が削除されました

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

ていることに注意してください。また、配列のインデックスは、またよりむしろvar Ltd = results.Latitude[i];

var Ltd = results[i].Latitude;のように、というよりも、式の最後に、配列の名前の後に来なければならないときにそれを、initMap機能によってロードされたスクリプトがeqfeed_callback関数を呼び出す必要がありますロードする。

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

EDIT:

このような何かを、各マーカーにタイトルを追加するには:

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

してくださいこれは、このように、jQueryの経由でJSONをロードすることによって行うことができます詳細については、Google Maps API referenceを参照してください。

+0

もし、私が** EpidemicName **を各点の私のマーカーとしてどうしたらよいか。 ** EpidemicName **もJsonのObjectです。 –

+0

@LutaayaHuzaifahIdris私はこの情報で私の答えを更新しました。 –

+0

ありがとう@Jason –

関連する問題