Удалить существующие полилинии с карты google

Question

У меня есть следующий код для обозначения нескольких точек на карте мира, и при каждом щелчке по каждой точке произвольно выбирайте две точки и создавайте полилинии от выбранной точки до случайных двух точек.

http://jsfiddle.net/sux7eo3d/

var markerBounds = new google.maps.LatLngBounds(); 
var locations = [ 
    ['Rio De Janeiro (GIG)', -22.808903,-43.243647, 5], 
    ['Sydney (SYD)', -33.946111,151.177222, 4], 
    ['Delhi (DEL)', 28.5665,77.103088, 5], 
    ['Tokyo (TYO)', 35.689444,139.691667, 3], 
    ['New York (JFK)', 40.639751,-73.778925, 2], 
    ['Frankfurt (FRA)', 50.026421,8.543125, 1] 
]; 
var flightPlanCoordinates1 = []; 
var flightPlanCoordinates2 = []; 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 1, 
    minZoom:1, 
    center: new google.maps.LatLng(0, 0), 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
}); 

var infowindow = new google.maps.InfoWindow(); 

var marker, i; 

for (i = 0; i < locations.length; i++) { 

    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 

    return function() { 
     var p1 = Math.floor(Math.random() * 6); 
     var p2 = Math.floor(Math.random() * 6); 

     Point1 = new google.maps.LatLng(this.position.lat(),this.position.lng()); 
     Point2 = new google.maps.LatLng(locations[p1][1], locations[p1][2]); 
     Point3 = new google.maps.LatLng(locations[p2][1], locations[p2][2]); 
     flightPlanCoordinates1.push(Point1); 
     flightPlanCoordinates1.push(Point2); 
     flightPlanCoordinates2.push(Point1); 
     flightPlanCoordinates2.push(Point3); 

     var flightPath1 = new google.maps.Polyline({ 
     path: flightPlanCoordinates1, 
     geodesic: true, 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
     }); 

     var flightPath2 = new google.maps.Polyline({ 
     path: flightPlanCoordinates2, 
     geodesic: true, 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
     }); 

     flightPath1.setMap(map); 
     flightPath2.setMap(map); 

    } 
    })(marker, i)); 

} 

Мне нужно удалить предыдущие полилинии раз я нажимаю на новую точку.

Любая помощь будет оценена.

Answer 1

Сделайте две локальные переменные полилинии flightPath1 и flightPath2 глобальный, а затем в начале маркера щелкните обработчика сброса их map свойства.

google.maps.event.addListener(marker, 'click', (function(marker, i) {  
    return function() { 
    if (flightPath1!== null) { 
     flightPath1.setMap(null); 
    } 
    if (flightPath2!== null) { 
     flightPath2.setMap(null); 
    } 
    ... 

На стороне узла, вы объявили массивы flightPlanCoordinates1 и flightPlanCoordinates2 глобальной координат, но вы не сбросить их содержимое в маркера щелкните обработчик. Вместо этого вы добавляете все больше и больше координат в массивы с каждым щелчком маркера. Чтобы избежать этого, вы должны превратить массивы в локальные переменные.

google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
    ... 
    var flightPlanCoordinates1 = [Point1, Point2]; 
    var flightPlanCoordinates2 = [Point1, Point3]; 
    ... 

Рабочий пример: JSFiddle

Answer 2

Вот точный example из API Google Maps v3.

Вы должны использовать этот код в функции:

flightPath1.setMap(null); 
flightPath2.setMap(null);