无法在显示另一个之前清除（删除）动态创建的折线 [英] Having trouble clearing (deleting) dynamically created polyline before displaying another

问题描述

在显示新的多段线之前，我无法清除任何现有的多段线。我已经尝试了在网络上找到的5种以上的不同方法（数组长度= 0，MVCArray清除，polylines.setMap（null）等）。我正在使用谷歌地图V3，以下是我的js文件中的代码

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 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);

}

你能帮我弄明白吗？
谢谢！

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;

这篇关于无法在显示另一个之前清除（删除）动态创建的折线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！