2012-11-03 77 views
0

Possible Duplicate:
google maps api real time updates with new geojson filesAJAX不檢索新GeoJSON的數據

因爲當多邊形,他們仍然使用json_template.json再生某種原因。我想用json_template1.json來刷新。我認爲這與我的ajax有關。

任何幫助,非常感謝。

謝謝

var map; 

    function initialize() { 
     var kansas_city = new google.maps.LatLng(39.316858,-94.963194); 
     var mapOptions = { 
     zoom: 13, 
     center: kansas_city, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

     google.maps.event.addListener(map, 'tilesloaded', function() { 
      setTimeout(function() { removeSectors() }, 1000); 
      setTimeout(function() { updateMap() }, 2000); 
      });  
    } 

    function removeSectors() { 
     if (allPolygons) { 
      for (i = 0; i < allPolygons.length; i++) { 
       allPolygons[i].setMap(null); 
      } 
     allPolygons.length = 0; 
     } 
    } 

    var data; 
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', 'json_template.json', true); 
    xhr.onload = function() { 
     data = JSON.parse(xhr.responseText) 
     sector_callback(data); 
    }; 
    xhr.send(); 

    function updateMap() { 
     var data; 
     var xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'json_template1.json', true); 
     xhr.onload = function(response) { 
      data = JSON.parse(response.responseText) 
      sector_callback(data); 
     }; 
     xhr.send(); 
    } 

    function createClickablePoly(poly, html) { 
    google.maps.event.addListener(poly, 'click', function(evt) { 
     infowindow.setContent(html); 
     infowindow.setPosition(evt.latLng); 
     infowindow.open(map); 
     }); 
    } 
    var infowindow = new google.maps.InfoWindow({});   

    function sector_callback() { 
     var bounds = new google.maps.LatLngBounds();   
     for (var i = 0, len = data.features.length; i < len; i++) { 
      var coords = data.features[i].geometry.coordinates[0]; 
      siteNames = data.features[i].properties.Name; // added for site names 
      var path = []; 
     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); 

     } 

     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); 
     //console.debug(siteNames); 

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

     currentPolygon.setOptions({ 
      fillOpacity: 0.45, 
      fillColor: "#FF0000" 
      }) 
     }); 

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

     allPolygons.push(polygons); 
     } 
    } 
    var allPolygons = []; 

回答

1

xhr.onload = function()必須接受一個參數,如:

function updateMap() { 
     var data; 
     var xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'json_template1.json', true); 
     xhr.onload = function(request) { 
      data = JSON.parse(request.responseText) 
      sector_callback(data); 
     }; 
     xhr.send(); 
    } 

編輯:

您也可以使用這個AJAX功能,這是跨瀏覽器兼容:

function ajaxLoad(url,callback,plain) { 
    var http_request = false; 

    if (window.XMLHttpRequest) { // Mozilla, Safari, ... 
     http_request = new XMLHttpRequest(); 
     if (http_request.overrideMimeType && plain) { 
      http_request.overrideMimeType('text/plain'); 
     } 
    } else if (window.ActiveXObject) { // IE 
     try { 
      http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
      try { 
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e) {} 
     } 
    } 
    if (!http_request) { 
     alert('Giving up :(Cannot create an XMLHTTP instance'); 
     return false; 
    } 
    http_request.onreadystatechange = function() { 
     if (http_request.readyState == 4) { 
      if (http_request.status == 200) { 
       eval(callback(http_request)); 
      } 
      else { 
       alert('Request Failed: ' + http_request.status); 
      } 
     } 
    }; 
    http_request.open('GET', url, true); 
    http_request.send(null); 
} 

,並調用它像這樣:

ajaxLoad('json_template1.json',processAjaxResult, true); 

然後

function processAjaxResult(request) { 
    alert(request.responseText); //<---- your data is now here! 
    //...etc 
} 
+0

我加了參數,但與原來的以.json文件仍然更新。我肯定錯過了什麼。謝謝。 –

+0

其實我得到以下錯誤:一旦第二次Ajax調用發生,地圖不刷新。 SyntaxError:JSON.parse:意外字符 [Break On This Error] \t data = JSON.parse(response.responseText) –

+0

我更新了上面的代碼以顯示我目前擁有的。 –