Возможно ли, чтобы отредактированный атрибут был отключен в полилинии, но все же отображает вершины как круги с кликом?

Question

Я хотел бы отобразить полилинию так, чтобы вершины не могли быть перемещены, удалены или добавлены, то есть точно так же, как если для атрибута editable установлено значение false, но круги, которые присутствуют, когда атрибут editable установлен в true, по-прежнему видимые так, чтобы их можно было щелкнуть и получить число вершин.

Таким образом, код ломаная может быть:

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

Возможно ли это?

Answer 1

Один из вариантов: обработать через полилинию, добавить круговые маркеры в каждую вершину в строке с номером вершин в инфо-окне маркера.

Связанные вопрос: Google Maps V3 Polyline : make it editable without center point(s)

proof of concept fiddle

фрагмент кода:

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>