谷歌地圖 API v3 繪圖管理器沒有正確繪制虛線折線

Question

我正在嘗試將此示例與繪圖管理器一起使用： https : //developers.google.com/maps/documentation/javascript/examples/overlay-symbol-dashed

Jsfiddle演示

  var lineSymbol = {
      path: 'M 0,-1 0,1',
      strokeOpacity: 1,
      scale: 4
      };
  var drawingManager = new google.maps.drawing.DrawingManager({
  polylineOptions: {
      icons: [{
      icon: lineSymbol,
    // offset: '100%',
    offset: '0',
    repeat: '20px'
  }],
  editable: true
},  });
drawingManager.setMap(map);

請僅在此演示中嘗試折線，因為我僅將折線選項設置為虛線圖標。 多邊形已略有更改，但似乎頂部有一條連續的線重疊。 如何去掉實線？

Answer 1

您需要在折線上設置strokeOpacity: 0 （在PolylineOptions中）：

var drawingManager = new google.maps.drawing.DrawingManager({
    polylineOptions: {
    icons: [{
      icon: lineSymbol,
      // offset: '100%',
      offset: '0',
      repeat: '20px'
    }],
    strokeOpacity: 0,
    editable: true
  },
});

更新的小提琴

代碼片段：

 function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 15, center: { lat: 17.4446, lng: 78.3802 } }); var lineSymbol = { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 4 }; var drawingManager = new google.maps.drawing.DrawingManager({ polylineOptions: { icons: [{ icon: lineSymbol, // offset: '100%', offset: '0', repeat: '20px' }], strokeOpacity: 0, editable: true }, }); drawingManager.setMap(map); google.maps.event.addListener(drawingManager, 'markercomplete', function(m) { markersArray.push(m); google.maps.event.addListener(m, 'click', function() { var infoBox = new google.maps.InfoWindow(); infoBox.setContent('Marker Info'); infoBox.open(map, this); }); }); /* dmMarkerOptions = { drawingMode: google.maps.drawing.OverlayType.MARKER, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.MARKER ] }, markerOptions: { clickable: true, editable: true, draggable: false } }; dmPolygonOptions = { drawingMode: google.maps.drawing.OverlayType.POLYGON, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.POLYGON, ] }, polygonOptions: { clickable: true, editable: true, strokeColor: '#FF0000', strokeOpacity: 1, strokeWeight: 2, fillOpacity: 0 } }; */ //drawingManager.setOptions(dmPolygonOptions) }

 #map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; }

 <div id="map"></div> <script async defer src="https://maps.googleapis.com/maps/api/js?libraries=drawing&callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"> </script>