Düzenlenebilir özniteliğin bir poligonda kapalı olması mümkün olabilir, ancak yine de köşeleri tıklanabilir çevreler olarak gösterebilir mi?

Question

Köşelerin taşınamaz, silinemez veya eklenemez, yani düzenlenebilir öznitelik yanlış olarak ayarlandığında olduğu gibi, ancak düzenlenebilir öznitelik true olarak ayarlandığında mevcut olan daireler hala bir polyline görüntülemek istiyorum. görülebilecekleri şekilde görünür ve elde edilen bir köşe sayısı.

Yani çoklu çizgi kod olabilir:

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

bu mümkün mü?

Answer 1

Tek seçenek: Çoklu çizgi boyunca işlem yapın, işaretin en düşük noktasındaki köşeli sayıdaki çizgideki her köşe noktasına dairesel işaretler ekleyin.

İlgili soru: Google Maps V3 Polyline : make it editable without center point(s)

proof of concept fiddle

kod parçacığı:

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>