2012-11-02 67 views
0

我可以在地圖上加載瓷磚後5秒內清除多邊形,但當我嘗試再次構建多邊形時,多邊形將由原始數據生成。我想使用新的數據集。在將地圖從地圖上移除後,建立多邊形

我在做什麼錯?

對不起,有很多問題。學習API我有很多樂趣。

預先感謝您。

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() }, 3000); 
      setTimeout(function() { updateMap() }, 4000); 
      });  
    } 

    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() { 
      data = JSON.parse(xhr.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 = []; 
+0

爲什麼要刪除多邊形,然後將其替換? – Marcelo

+0

因爲替換多邊形最終將從新的geoJSON數據集中生成。 –

回答

1

將tilesloaded事件移動到初始化函數中。在它坐下時,您將添加儘可能多的聽衆,因爲您有多邊形,他們都將嘗試清除/更新地圖。

+0

由於某些原因,當多邊形更新時,它們正在使用原始的「json_template.json」文件進行更新,而不是所需的「json_template1.json」文件。有什麼明顯的我做錯了嗎?我猜這跟他的ajax有關。謝謝。 –

+0

看起來你可能正在擊中json_template的緩存副本。在文件名的末尾添加一個隨機數字,並且應該做到這一點。 – Rick