無法從地圖隱藏PolyLine

Question

我有一個PolyLine，我在地圖上點擊繪製。這工作正常，但由於某種原因，我無法將其從地圖上隱藏起來。刪除和其他一切正常。我嘗試了幾乎所有從setVisible到setMap（null）的東西，就像你可以在下面的代碼中一樣。

var drawOnMap = function(){ 

var poly = null; 
var path; 
var encodedString; 
var decodedString; 

function drawPolyLine(latLng){ 

    if(!poly){ 
     path = new google.maps.MVCArray(); 
    } 
    console.log(latLng); 
    path.push(latLng); 

    poly = new google.maps.Polyline({ 
     path: path, 
     strokeColor: '#000000', 
     strokeOpacity: 1.0, 
     strokeWeight: 3, 
     editable: true, 
     map: map 
    }); 
} 

function getPolyLineData(){ 
    //console.log(path.getPath()); 
    var firstPoint = path.getAt(0); 
    var lastPoint = path.getAt(path.length - 1); 

    console.log(firstPoint); 

    console.log(lastPoint); 

    if ($j("#useWaypoints").is(":checked")) { 
     var twaypoints = path.slice(1, path.length - 1); 

     var waypoints = []; 

     for (var i = 0; i < twaypoints.length; i++) { 
      waypoints.push(
       { 
        location: new google.maps.LatLng(twaypoints[i].lat(), twaypoints[i].lng()) 
       } 
      ); 
     } 
    } else { 
     waypoints = null; 
    } 

    return data = { 
       origin: {lat: firstPoint.lat(), lng: firstPoint.lng()}, 
       destination: {lat: lastPoint.lat(), lng: lastPoint.lng()}, 
       waypoints: waypoints 
      }; 
} 

function removePolyLine(){ 

    for(var i = path.length; i > 0 ; i--){ 
     path.pop(); 
    } 
} 

function removeLastPoint(){ 
    if(path.length > 0){ 
     path.pop(); 
     poly.setPath(path); 
    } 
} 

function hidePolyLine(){ 
    console.log("HIDE"); 
    console.log(poly.getVisible()); 
    poly.getVisible() ? poly.setVisible(false) : poly.setVisible(true); 
    poly.setMap(null); 
} 

function showPolyLine(){ 
    console.log("SHOW"); 
    poly.setVisible(true); 
    poly.setMap(map); 
} 


return { 
    drawPolyLine: drawPolyLine, 
    getPolyLineData: getPolyLineData, 
    removeLastPoint: removeLastPoint, 
    removePolyLine: removePolyLine, 
    showPolyLine: showPolyLine, 
    hidePolyLine: hidePolyLine 
} 
}(); 

有人可以告訴我，爲什麼這不起作用。根據Google Maps API，我是對的。我也發現了幾個關於這個話題的SO問題，但沒有爲我工作。

要更具體些。這部分爲什麼不起作用？我不看它的任何理由...

poly.getVisible() ? poly.setVisible(false) : poly.setVisible(true); 

polyline-hide

MAPS API v3

Toogle Visablity

編輯：I'm呼籲通過單選按鈕隱藏/顯示功能

$j("input[name='editDraw']").change(function() { 
    console.log("editDraw change"); 
    if ($j("#editDraw_on").is(":checked")) { 

     drawOnMap.showPolyLine(); 

    }; 

    if ($j("#editDraw_off").is(":checked")) { 
     //console.log("OFF"); 
     drawOnMap.hidePolyLine(); 
    }; 

}); 

該代碼是圍繞使用揭示模塊模式編輯對象。該對象正在運行，因爲它僅用於測試地圖實例和單擊事件來調用drawPolyLine（latLng）。

Answer 1

你的問題是每次你給折線添加一個點時，你創建一個新的折線並失去對舊折線的引用。如果多段線已經存在，則擴展現有多段線的路徑，而不是創建新的多段線。

function drawPolyLine(latLng){ 
    if(!poly){ 
     path = new google.maps.MVCArray(); 
     console.log(latLng); 
     path.push(latLng); 

     poly = new google.maps.Polyline({ 
     path: path, 
     strokeColor: '#000000', 
     strokeOpacity: 1.0, 
     strokeWeight: 3, 
     editable: true, 
     map: map 
     }); 
    } else { 
     poly.getPath().push(latLng); 
    }  
} 

proof of concept fiddle

代碼片段：

var drawOnMap = function() { 
 

 
    var poly = null; 
 
    var path; 
 
    var encodedString; 
 
    var decodedString; 
 

 
    function drawPolyLine(latLng) { 
 

 
    if (!poly) { 
 
     path = new google.maps.MVCArray(); 
 
     console.log(latLng); 
 
     path.push(latLng); 
 

 
     poly = new google.maps.Polyline({ 
 
     path: path, 
 
     strokeColor: '#000000', 
 
     strokeOpacity: 1.0, 
 
     strokeWeight: 3, 
 
     editable: true, 
 
     map: map 
 
     }); 
 
    } else { 
 
     poly.getPath().push(latLng); 
 
    } 
 
    } 
 

 
    function getPolyLineData() { 
 
    var firstPoint = path.getAt(0); 
 
    var lastPoint = path.getAt(path.length - 1); 
 

 
    console.log(firstPoint); 
 
    console.log(lastPoint); 
 

 
    if ($j("#useWaypoints").is(":checked")) { 
 
     var twaypoints = path.slice(1, path.length - 1); 
 

 
     var waypoints = []; 
 

 
     for (var i = 0; i < twaypoints.length; i++) { 
 
     waypoints.push({ 
 
      location: new google.maps.LatLng(twaypoints[i].lat(), twaypoints[i].lng()) 
 
     }); 
 
     } 
 
    } else { 
 
     waypoints = null; 
 
    } 
 

 
    return data = { 
 
     origin: { 
 
     lat: firstPoint.lat(), 
 
     lng: firstPoint.lng() 
 
     }, 
 
     destination: { 
 
     lat: lastPoint.lat(), 
 
     lng: lastPoint.lng() 
 
     }, 
 
     waypoints: waypoints 
 
    }; 
 
    } 
 

 
    function removePolyLine() { 
 

 
    for (var i = path.length; i > 0; i--) { 
 
     path.pop(); 
 
    } 
 
    } 
 

 
    function removeLastPoint() { 
 
    if (path.length > 0) { 
 
     path.pop(); 
 
     poly.setPath(path); 
 
    } 
 
    } 
 

 
    function hidePolyLine() { 
 
    console.log("HIDE"); 
 
    console.log(poly.getVisible()); 
 
    poly.getVisible() ? poly.setVisible(false) : poly.setVisible(true); 
 
    poly.setMap(null); 
 
    } 
 

 
    function showPolyLine() { 
 
    console.log("SHOW"); 
 
    poly.setVisible(true); 
 
    poly.setMap(map); 
 
    } 
 

 

 
    return { 
 
    drawPolyLine: drawPolyLine, 
 
    getPolyLineData: getPolyLineData, 
 
    removeLastPoint: removeLastPoint, 
 
    removePolyLine: removePolyLine, 
 
    showPolyLine: showPolyLine, 
 
    hidePolyLine: hidePolyLine 
 
    } 
 
}(); 
 

 

 
var map; 
 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    google.maps.event.addListener(map, 'click', function(evt) { 
 
    drawOnMap.drawPolyLine(evt.latLng); 
 
    }) 
 

 
    $("input[name='editDraw']").change(function() { 
 
    console.log("editDraw change"); 
 
    if ($("#editDraw_on").is(":checked")) { 
 

 
     drawOnMap.showPolyLine(); 
 

 
    }; 
 

 
    if ($("#editDraw_off").is(":checked")) { 
 
     //console.log("OFF"); 
 
     drawOnMap.hidePolyLine(); 
 
    }; 
 

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

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input name="editDraw" id="editDraw_on" type="radio" checked="checked" /> 
 
<input name="editDraw" id="editDraw_off" type="radio" /> 
 

 
<div id="map_canvas"></div>