Google Maps add remove Polyline

Question

У меня вопрос о «удалении Полилиний» с Google Maps. В этом документе объясняется, как можно добавить или удалить полилинию. (https://developers.google.com/maps/documentation/javascript/examples/polyline-remove?hl=de)

Но моя ситуация немного отличается. У меня есть функция addPolyline, которая добавляет полилинию на Картах Google. С помощью этой функции я могу добавить Polylines, поэтому я могу вернуть «объект полилинии», но я не могу удалить эту полину таким же образом.

Если вы нажмете «addLines», его можно нарисовать, но если я нажму на removeLine, он не будет удален.

var map; 
var flightPlanCoordinates; 

function addPolyline(el){ 
    polyName = new google.maps.Polyline({ 
     path: el, 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 
    return polyName; 
} 


function initialize() { 
    var mapOptions = { 
    zoom: 3, 
    center: new google.maps.LatLng(0, -180), 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    flightPlanCoordinates = [ 
    new google.maps.LatLng(37.772323, -122.214897), 
    new google.maps.LatLng(21.291982, -157.821856), 
    new google.maps.LatLng(-18.142599, 178.431), 
    new google.maps.LatLng(-27.46758, 153.027892) 
    ]; 
} 

function addLine(el) { 
    el.setMap(map); 
} 

function removeLine(el) { 
    el.setMap(null); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

Вот Fiddle: http://jsfiddle.net/aldimeola1122/gna00zwb/

Как я могу добиться этого, вы можете мне помочь? Спасибо заранее.

Answer 1

Вы создаете новую полилинию, а затем удаляете ее.

<input onclick="removeLine(addPolyline(flightPlanCoordinates));" type=button value="Remove line"> 

Если вы хотите удалить существующую полилинию, вам необходимо оставить ссылку на нее.

<input onclick="removeLine(polyline);" type=button value="Remove line"> 
<input onclick="polyline=addLine(addPolyline(flightPlanCoordinates));" type=button value="Add line"> 

working fiddle

var map; 
 
var flightPlanCoordinates; 
 
var polyline; 
 

 
function addPolyline(el) { 
 
    polyName = new google.maps.Polyline({ 
 
    path: el, 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 1.0, 
 
    strokeWeight: 2 
 
    }); 
 
    return polyName; 
 
} 
 

 

 
function initialize() { 
 
    var mapOptions = { 
 
    zoom: 3, 
 
    center: new google.maps.LatLng(0, -180), 
 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    flightPlanCoordinates = [ 
 
    new google.maps.LatLng(37.772323, -122.214897), 
 
    new google.maps.LatLng(21.291982, -157.821856), 
 
    new google.maps.LatLng(-18.142599, 178.431), 
 
    new google.maps.LatLng(-27.46758, 153.027892) 
 
    ]; 
 
} 
 

 
function addLine(el) { 
 
    el.setMap(map); 
 
    return el; 
 
} 
 

 
function removeLine(el) { 
 
    el.setMap(null); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
#panel { 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 50%; 
 
    margin-left: -180px; 
 
    z-index: 5; 
 
    background-color: #fff; 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="panel"> 
 
    <input onclick="removeLine(polyline);" type=button value="Remove line"> 
 
    <input onclick="polyline=addLine(addPolyline(flightPlanCoordinates));" type=button value="Add line"> 
 
</div> 
 
<div id="map-canvas"></div>