2011-08-12 8 views
2

新しいポリラインを表示する前に、既存のポリラインをクリアするのに問題があります。私は既にWeb上で見つけた5つ以上の異なるメソッド(配列の長さ= 0、MVCArrayのクリア、polylines.setMap(null)など)を試しました。私はV3のGoogleマップを使用しています。ここに私のjsファイルのコードがあります別のポリゴンを表示する前に、動的に作成されたポリラインをクリア(削除)できない

// initialize the google map 
var latlng = new google.maps.LatLng(37.775, -122.418333); 

var myOptions = { 
    zoom: 11, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var map = new google.maps.Map(document.getElementById("map_canvas"), 
    myOptions); 


// declare bounds object 
var bounds = new google.maps.LatLngBounds(); 


// run the following functions when Routes dropdown box is changed 
$("#routeID").change(function(){ 

    // when JSON object is retrieved, delete existing overlays 
    deleteOverlays(); 

    if ($("#routeID").val() > 0) { 

     // get JSON object from routestations.php (route information, lat, lon for stations on the selected route) 
     $.getJSON('includes/routestations.php',{'routeID':$("#routeID").val()}, function(routeInfoJSON){ 

      // plot the new overlays 
      overlays(routeInfoJSON); 

     }); 
    } 
}); 


// delete overlays (markers, polylines) to "reset" the map before displaying other overlays 
deleteOverlays = function() { 
    if (markersArray) { 
    for (i in markersArray) { 
    markersArray[i].setMap(null); 
    } 
    markersArray.length = 0; 
    } 
} 


// declare an empty array for markers 
var markersArray = []; 

//set infoWindow global 
var infoWindow; 

// Place layer objects (polylines, markers, etc) for the selected route 
overlays = function(routeInfoJSON) { 

    // declare polylinesArray 
    var polylinesArray = []; 

    for(var i=0; i < routeInfoJSON.config.station.length; i++){ 

     // create point, marker objects 
     var point = new google.maps.LatLng(parseFloat(routeInfoJSON.config.lat[i]),parseFloat(routeInfoJSON.config.lon[i])); 
     var marker = new google.maps.Marker({ 
      position: point, 
      map: map, 
      title: routeInfoJSON.config.station[i] 
     }); 

     // push marker into markersArray (for future removal purposes only) 
     markersArray.push(marker); 

     // push lat/lon into polylinesArray 
     polylinesArray.push(point); 

     // set the marker on the map 
     marker.setMap(map); 

     // set & display infoWindow content 

     (function(i, marker){ 
      if(!infoWindow){ 
       infoWindow = new google.maps.InfoWindow(); 
      } 

      var html = ''; 
      google.maps.event.addListener(marker, 'click', function() { 

       // get JSON object from routestations.php (route information, lat, lon for stations on the selected route) 
       $.getJSON('includes/schedule.php', function(schedJSON){ 

        // look through the stations in the schedule to match it with the user-selected station 
        for (var n = 0; n < schedJSON.station.length; n++) { 

         // if we find the station in the JSON that matches the user-selected station, then execute --> 
         if (schedJSON.station[n].abbr == routeInfoJSON.config.station[i]){ 
          var html = "<div id=infoWindow class=info>"; 
          html = html + "<h3>Train Arrival Times for '" + schedJSON.station[n].name + "' Station</h3>"; 

          // set html for inforWindow 
          for (var c = 0; c < schedJSON.station[n].eta.length; c++) { 
           html = html + "<strong>To " + schedJSON.station[n].eta[c].destination + ": "; 
           html = html + "</strong>" + schedJSON.station[n].eta[c].estimate + "<br /><br />"; 
          } 

          html = html + "</div>"; 
         } 
        } 
        infoWindow.setContent(html); 
        infoWindow.open(map, marker); 
       }); 
      }); 
     })(i, marker); 

     // extend bound object with each LatLng 
     bounds.extend(point) 

    } 

    // Adjust the map to new bounding box 
    map.fitBounds(bounds); 


    // start polylines codes 
    var polyLine = new google.maps.Polyline({ 
     path: polylinesArray, 
     strokeColor: routeInfoJSON.color, 
     strokeOpacity: 0.8, 
     strokeWeight: 5 
    }); 

    // set polyline on map  
    polyLine.setPath(polylinesArray); 
    polyLine.setMap(map); 

} 

私はそれを理解してもらえますか? ありがとうございました!

答えて

2

希望このヘルプ

//global path 
var path = null; 

... 

//create new polyline 
var polyLine = new google.maps.Polyline({ 
    path: polylinesArray, 
    strokeColor: routeInfoJSON.color, 
    strokeOpacity: 0.8, 
    strokeWeight: 5 
}); 

//delete old 
var prepath = path; 
if(prepath){ 
    prepath.setMap(null); 
} 
//new polyline 
polyLine.setMap(this.map); 

// assign toglobal var path 
path = polyLine; 
+0

OH。じぶんの。神。あなたはそれを修正しました....私はこれを過去7時間に解決しようとしています!!!!!!!!ありがとうございました!!!!!!!! – Kevin

+0

ケビン、あなたはこの答えを "受け入れる"べきです。 – plexer

関連する問題