谷歌地圖api實時更新新的geojson文件

我想添加實時動態到我的地圖，通過傳遞一個新的本地geojson文件約每3分鐘。做到這一點的最佳方法是什麼，以便它對最終用戶無縫。我想阿賈克斯和或setinterval函數是答案，但我不知道從哪裏開始。如果有人知道任何例子或可以提供一些建議。我將不勝感激。谷歌地圖api實時更新新的geojson文件

謝謝。

這裏是我嘗試使用AJAX。我無法遍歷geoJSON結構。不知道我做錯了什麼。 AJAX和JavaScript對我來說仍然是陌生的。

<!DOCTYPE html> 
    <html> 
    <head> 
<p id="demo">coordinates</p> 
</br> 
<p id="coords">coordinates</p> 
<style> 
    html, body, #map_canvas { margin: 0; padding: 0; height: 100%; } 
</style> 
<script 
    src="https://maps.googleapis.com/maps/api/js?sensor=false& libraries=visualization,MVCObject"> 
</script> 
<script> 
    var map; 



    // ajax request to load json data 
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', 'json_template.json', true); 
    xhr.onload = function() { 
    // 
    sector_callback(this.responseText); 
    //console.log(xhr.responseText); 
    }; 
    xhr.send(); 

    // function to load map into body when page loads 
    function initialize() { 
     var kansas_city = new google.maps.LatLng(39.00495613,-94.64780668); 
     var mapOptions = { 
     zoom: 10, 
     center: kansas_city, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
     }; 

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
    } 

    // function definition to process the geoJSON data 
    function sector_callback() { 
    var bounds = new google.maps.LatLngBounds(); 

     //console.log(xhr.responseText); 
     for (var i = 0, len = features.length; i < len; i++) { 
      var coords = features[i].geometry.coordinates[0]; 
      siteNames = features[i].properties.Name; // added for site names 
      var path = []; 
        //console.log(data); 
      for (var j = 0, len2 = coords.length; j < len2; j++){ // pull out each set of coords and create a map object 
       var pt = new google.maps.LatLng(coords[j][1], coords[j][0]) 
       bounds.extend(pt); 
       path.push(pt); 

       //path.push(new google.maps.LatLng(coords[j][1], coords[j][0])); 
      } 

      var polygons = new google.maps.Polygon({ 
      path: path, 
       strokeColor: "#000000", 
       strokeOpacity: 0.8, 
       strokeWeight: 1, 
       fillColor: "#000000", 
       fillOpacity: 0.35, 
      map: map 
      }); 
      createClickablePoly(polygons, siteNames); 



      google.maps.event.addListener(polygons, 'mouseover', function() { 
      var currentPolygon = this; 

      currentPolygon.setOptions({ // setOptions is a method and properties below 
       fillOpacity: 0.45, 
       fillColor: "#FF0000" 
       }) 
      }); 

      google.maps.event.addListener(polygons, 'mouseout', function() { 
      var currentPolygon = this; 
      currentPolygon.setOptions({ 
       fillOpacity: 0.35, 
       fillColor: "#000000" 
       }) 
      }); 
     } 
    } 


</script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas"></div> 
    <h2>AJAX</h2> 
    <div id="myDiv"></div> 
    </body> 
</html>

以GeoJSON：

{ 
"type": "FeatureCollection", 
"features": [{ 
    "type": "Feature", 
    "properties": { 
     "Name": "1_1", 
     "Description": "" 
    }, 
    "geometry": { 
     "type": "Polygon", 
     "coordinates": [ 
      [ 
       [-94.963194, 39.316858], 
       [-94.959670, 39.321990], 
       [-94.959050, 39.321720], 
       [-94.958460, 39.321400], 
       [-94.957920, 39.321040], 
       [-94.957420, 39.320640], 
       [-94.956980, 39.320210], 
       [-94.956250, 39.319270], 
       [-94.955990, 39.318760], 
       [-94.955780, 39.318240], 
       [-94.955640, 39.317700], 
       [-94.955570, 39.317160], 
       [-94.955570, 39.316610], 
       [-94.963194, 39.316858] 
      ] 
     ] 
    } 
}, { 
    "type": "Feature", 
    "properties": { 
     "Name": "214_1", 
     "Description": "" 
    }, 
    "geometry": { 
     "type": "Polygon", 
     "coordinates": [ 
      [ 
       [-94.783917, 39.083417], 
       [-94.776470, 39.084670], 
       [-94.776340, 39.084140], 
       [-94.776290, 39.083590], 
       [-94.776300, 39.083040], 
       [-94.776380, 39.082500], 
       [-94.776530, 39.081960], 
       [-94.777020, 39.080940], 
       [-94.777360, 39.080460], 
       [-94.777760, 39.080000], 
       [-94.778210, 39.079570], 
       [-94.778710, 39.079180], 
       [-94.779260, 39.078830], 
       [-94.783917, 39.083417] 
      ] 
     ] 
    } 
    }] 
    }

來源

2012-10-31 rf guy

function sector_callback()不接受任何參數。它應該是像function sector_callback(data)。你不能使用全局變量xhr，因爲AJAX是異步的。

function sector_callback(data) { 
     for (var i = 0, i < data.features.length ; i++) { 
      var coords = data.features[i].geometry.coordinates[0]; 
      //...etc

來源

2012-10-31 16:51:43 Marcelo

谷歌地圖api實時更新新的geojson文件

回答

相關問題