Having trouble clearing (deleting) dynamically created polyline before displaying another
I am having trouble clearing any existing polylines before displaying a new one. I've already tried more than 5 different methods (array length = 0, MVCArray clear, polylines.setMap(null), etc) that I found on the web. I am using google maps V3, and here's the code from my js file
// 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 infoWi开发者_如何学Pythonndow 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);
}
could you please help me figure it out? Thank you!
hope this help
//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;
精彩评论