Ist es möglich, das bearbeitbare Attribut in einer Polylinie zu deaktivieren, aber die Scheitelpunkte immer noch als klickbare Kreise anzuzeigen?

Question

Ich möchte eine Polylinie anzeigen, so dass die Vertices nicht verschoben, gelöscht oder hinzugefügt werden können, dh genau wie wenn das bearbeitbare Attribut auf false gesetzt ist, aber die Kreise, die vorhanden sind, wenn das bearbeitbare Attribut auf true gesetzt ist sichtbar, damit sie angeklickt werden können und eine Eckennummer erhalten wird. So könnte der Linienzug Code

sein:

newPoly = new google.maps.Polyline({ 
    strokeColor: '#08088a', 
    strokeWeight: 2, 
    editable:  false 
}); 

Ist das möglich?

Answer 1

Eine Option: Verarbeiten Sie über die Polylinie, fügen Sie jedem Eckpunkt in der Zeile mit der Eckennummer im Infofenster der Markierung kreisförmige Markierungen hinzu.

Verwandte Frage: Google Maps V3 Polyline : make it editable without center point(s)

proof of concept fiddle

Code-Schnipsel:

function initialize() { 
 
    var infowindow = new google.maps.InfoWindow(); 
 
    var 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 
 
    }); 
 
    var polyCoord = [ 
 
    new google.maps.LatLng(41.86, 8.73), 
 
    new google.maps.LatLng(41.88, 8.75), 
 
    new google.maps.LatLng(42, 8), 
 
    new google.maps.LatLng(43.5, 9) 
 
    ]; 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    for (var i = 0; i < polyCoord.length; i++) { 
 
    bounds.extend(polyCoord[i]); 
 
    var marker = new google.maps.Marker({ 
 
     position: polyCoord[i], 
 
     title: '#0', 
 
     map: map, 
 
     icon: { 
 
     path: google.maps.SymbolPath.CIRCLE, 
 
     fillColor: 'white', 
 
     fillOpacity: 1, 
 
     scale: 3, 
 
     strokeColor: 'black', 
 
     strokeWeight: 1, 
 
     strokeOpacity: 1, 
 
     // anchor: new google.maps.Point(200, 200) 
 
     } 
 
    }); 
 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
     infowindow.setContent("vertex #" + i + "<br>coord: (" + this.getPosition().toUrlValue(6) + ")"); 
 
     infowindow.open(map, marker); 
 
     } 
 
    })(marker, i)); 
 
    } 
 
    map.fitBounds(bounds); 
 
    // Polyline 
 
    var newPoly = new google.maps.Polyline({ 
 
    strokeColor: '#08088a', 
 
    strokeWeight: 2, 
 
    editable: false, 
 
    path: polyCoord, 
 
    map: map 
 
    }); 
 
} 
 
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> 
 
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>