是否可以在多段线中关闭可编辑属性但仍将顶点显示为可点击的圆圈？

Question

我想显示一条折线，这样顶点就不能移动、删除或添加，即当可编辑属性设置为 false 时完全一样，但是当可编辑属性设置为true 仍然可见，因此可以单击它们并获得顶点编号。

所以折线代码可以是：

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

这可能吗？

Answer 1

一个选项：通过折线处理，将圆形标记添加到线中的每个顶点，并在标记的信息窗口中显示顶点编号。

相关问题：

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>

是否可以在多段线中关闭可编辑属性但仍将顶点显示为可点击的圆圈？

Is it possible to have the editable attribute turned off in a polyline but still display the vertices as clickable circles?

polyline

google-maps-api-3