PolyLine kann nicht aus der Karte

Question

versteckt werden Ich habe eine PolyLine, die ich mit Klicks auf die Karte zeichne. Das funktioniert gut, aber aus irgendeinem Grund kann ich das nicht vor der Karte verstecken. Entfernen und alles andere funktioniert gut. Ich habe fast alles aus setVisible zu setMap (null) versucht, wie Sie in dem Code unten können.

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 
} 
}(); 

Kann mir jemand sagen, warum das nicht funktioniert. Laut Google Maps API habe ich recht. Ich habe auch mehrere SO Fragen zu diesem Thema gefunden, aber nichts hat für mich funktioniert.

Um ein bisschen genauer zu sein. Warum funktioniert dieser Teil nicht? Ich habe keine Gründe sehen Sie es ...

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

polyline-hide

MAPS API v3

Toogle Visablity

EDIT: Ich Aufruf der hide/show Funktionalität über Radiotasten

$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(); 
    }; 

}); 

Der Code ist Surround ed in einem Objekt mit dem aufdeckenden Modulmuster. Das Objekt wird eigenständig ausgeführt, um nur eine Karteninstanz zu testen und ein click -Ereignis zum Aufrufen von drawPolyLine (latLng) ist erforderlich.

Answer 1

Ihr Problem ist jedes Mal, wenn Sie der Polylinie einen Punkt hinzufügen, eine neue Polylinie erstellen und den Verweis auf die alte Polylinie verlieren. Wenn die Polylinie bereits vorhanden ist, erweitern Sie den Pfad der vorhandenen Polylinie, anstatt eine neue Polylinie zu erstellen.

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

Code-Schnipsel:

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>