谷歌地图添加删除折线

Question

我有一个关于'从谷歌地图删除折线'的问题。在本文档中解释了如何添加或删除多段线。 （https://developers.google.com/maps/documentation/javascript/examples/polyline-remove?hl=de）

但是我的情况有点不同。 我有一个'addPolyline'功能，它在Google地图上添加折线。有了这个函数，我可以添加多段线，所以我可以返回'折线对象'，但是我不能用同样的方法去除这个多段线。

如果你点击'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); 

这里是小提琴：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>