2017-02-28 6 views
-1

私は非常に Googleマップと新しい非常に新しい複雑なjavascriptに新しいです。これを念頭に置いて、私はUSGSのフィードを使ってWebマップを作成しようとしています。このフィードは5分ごとに更新されます。この同じフィード(geojsonファイル)を使用して、5分ごとにマップの更新を行いたいと思います。地図の更新で

私の最終目標は、これと少なくとも1つの他のフィードを地図上に表示/更新することです。過去4日間、私は何十もの投稿を見てきました。過負荷で混乱しています。誰か私の霧をクリアしてくださいか?

私が投稿しているコードは、コード内で何が起こっているのか把握できるように、私のコードではなく、主にコメントを追加しました。

<HTML> 
    <HEAD> 
    <TITLE>TEST OF MAP</TITLE> 
    <STYLE> 
/* --------------------------------------------------- */ 
/* Set the map height explicitly to define the size of */ 
/* the DIV * element that contains the map.   */ 
/* ----------------------------------------------------*/ 
     #map { 
     height: 75%; 
     border: 5px solid green; 
     } 
    </STYLE> 
    </HEAD> 

<SCRIPT type="text/javascript">  

// -------------------------------------- 
// Set a refresh interval in milliseconds 
// -------------------------------------- 
    setInterval(page_refresh, 1*60000); 
    google.maps.event.addDomListener(window, 'load', initialize); 

</SCRIPT> 

    <BODY> 
    <H1><CENTER>MAP Demo</CENTER></H1> 
    <DIV id="map"></DIV> 

    <SCRIPT> 
     var map; 
     function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 2, 
      center: new google.maps.LatLng(35.4437,139.6380), 
      mapTypeId: 'terrain' 
     }); 

// --------------------------------------------------------- 
// Create a <SCRIPT> tag and set the USGS URL as the source. 
// --------------------------------------------------------- 
     var script = document.createElement('script'); 

// ----------------------------------------------------------------------- 
// Using a local copy of the GeoJSON stored on the USGS server 
// 

http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_hour.geojsonp 
// ----------------------------------------------------------------------- 
     script.src = 

'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_hour.geojson 

p'; 
     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.features.length; i++) { 
      var coords = results.features[i].geometry.coordinates; 
      var latLng = new google.maps.LatLng(coords[1],coords[0]); 
      var marker = new google.maps.Marker({ 
      position: latLng, 
      map: map 
      }); 
     } 
     } 
    </SCRIPT> 

    <SCRIPT async defer src="https://maps.googleapis.com/maps/api/js? 

key=MY_MAP_KEY&callback=initMap"> 
    </SCRIPT> 
    </BODY> 
</HTML> 
+2

あなたの質問はありますか?投稿されたコードの問題は何ですか? – geocodezip

+0

申し訳ありませんが、私の質問ははっきりしていると思いました。それは、私の頭の中だけでした。謝罪いたします。 setIntervalが機能していないように見えますが、その理由はわかりません。私が確認した唯一の方法は、設定されたリフレッシュ時間制限が過ぎた後に、ページを手動でリフレッシュすることでした。ページをリフレッシュするにはどうすればよいですか?すべて/すべてのassitanceをありがとう。 –

答えて

0

非常に優雅ではありませんが、リフレッシュには次のものを使用しました。私は「概念の証明」を構築しているだけなので、ページ全体をリフレッシュすることは問題ではありません。

function timedRefresh(timeoutPeriod) { 
    setTimeout("location.reload(true);",timeoutPeriod); 
    } 
    window.onload = timedRefresh(60*5000); 
関連する問題