Javascript谷歌地圖API - 自動刷新/重新加載簡單的地圖

我一直在使用下面的谷歌地圖示例代碼。它顯示了一個圈在一個城市盤旋，人口越多，圈子越大。這段代碼運行良好，但是...只有當我重新加載瀏覽器窗口時纔會重新加載。有更聰明的方式使它autorefresh /重新加載？非常感謝！Javascript谷歌地圖API - 自動刷新/重新加載簡單的地圖

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Circles</title> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 
     // This example creates circles on the map, representing populations in North 
     // America. 

     // First, create an object containing LatLng and population for each city. 
     var citymap = { 
     chicago: { 
      center: {lat: 41.878, lng: -87.629}, 
      population: 2714856 
     }, 
     newyork: { 
      center: {lat: 40.714, lng: -74.005}, 
      population: 8405837 
     }, 
     losangeles: { 
      center: {lat: 34.052, lng: -118.243}, 
      population: 3857799 
     }, 
     vancouver: { 
      center: {lat: 49.25, lng: -123.1}, 
      population: 603502 
     } 
     }; 

     function initMap() { 
     // Create the map. 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 4, 
      center: {lat: 37.090, lng: -95.712}, 
      mapTypeId: 'terrain' 
     }); 

     // Construct the circle for each value in citymap. 
     // Note: We scale the area of the circle based on the population. 
     for (var city in citymap) { 
      // Add the circle for this city to the map. 
      var cityCircle = new google.maps.Circle({ 
      strokeColor: '#FF0000', 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: '#FF0000', 
      fillOpacity: 0.35, 
      map: map, 
      center: citymap[city].center, 
      radius: Math.sqrt(citymap[city].population) * 100 
      }); 
     } 
     } 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
    </script> 
    </body> 
</html>

來源

2016-10-11 Frankie Frankie

你可以使用一種稱爲location.reload（真），這設定一個計時器，甚至在使用這種方法是這樣的內部裝載的periodialExecuter功能....

new PeriodicalExecuter(function(pe) { 
     location.reload(true); 
    }, 10);

這將每10秒鐘刷新一次你的頁面......好像你在哪裏自己加載瀏覽器

來源

2016-11-24 13:32:41

Javascript谷歌地圖API - 自動刷新/重新加載簡單的地圖

回答

相關問題