谷歌地圖添加刪除折線

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>