是否允许在多段线的所需点（节点）中实现正确的破折号？

Question

我使用 google 地图绘图库并尝试构建虚折线。我根据文档创建路径。但是我无法让破折号在折线的顶点很好地对齐。

这是我的代码示例（构建虚线）：jsfiddle.

Here's what the result looks like.

Answer 1

将图标的比例更改为 1 或 2 会有帮助。"dash" 符号越小效果越好，现有的 API 代码不会t 似乎切断了多段线段的最终顶点处的符号，并且似乎没有说明在顶点之后经过多段线的符号部分。

如果你使用 Google's example 中的符号（原始比例为 4，它仍然有问题。将比例更改为 2，重复为 10px 似乎更好（仍然不是 "perfect" ):

var lineSymbol = {
    path: 'M 0,-1 0,1',
    strokeOpacity: 1,
    scale: 2
  };

  // snip, from drawing manager config 
    polylineOptions: {
      strokeOpacity: 0,
      strokeWeight: 3,
      icons: [{
        icon: lineSymbol,
        offset: '0',
        repeat: '10px'
      }],
    }

proof of concept fiddle

代码片段：

<title>Drawing tools</title>
<style>
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  #map {
    height: 100%;
  }

</style>

<body>
  <div id="map"></div>
  <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: {
          lat: -34.397,
          lng: 150.644
        },
        zoom: 8
      });

      var lineSymbol = {
        path: 'M 0,-1 0,1',
        strokeOpacity: 1,
        scale: 2
      };
      var symbolMark = new google.maps.Marker({
        // map: map,
        position: {
          lat: -34.35,
          lng: 150.644
        },
        icon: lineSymbol
      });
      var polyline = new google.maps.Polyline({
        map: map,
        path: [{
          lat: -34.397,
          lng: 149
        }, {
          lat: -34.397,
          lng: 150.644
        }, {
          lat: -34.8,
          lng: 150.0
        }, {
          lat: -35.2,
          lng: 151
        }],
        icons: [{
          icon: lineSymbol,
          offset: '0',
          repeat: '10px'
        }],
        strokeOpacity: 0,
        stokeWeight: 0
      });
      for (var i = 0; i < polyline.getPath().getLength(); i++) {
        var marker = new google.maps.Marker({
          map: map,
          position: polyline.getPath().getAt(i),
          icon: {
            url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
            size: new google.maps.Size(7, 7),
            anchor: new google.maps.Point(3.5, 3.5)
          }
        })
      }

      var drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.POLYLINE,
        drawingControl: true,
        drawingControlOptions: {
          position: google.maps.ControlPosition.TOP_CENTER,
          drawingModes: [
            google.maps.drawing.OverlayType.MARKER,
            google.maps.drawing.OverlayType.CIRCLE,
            google.maps.drawing.OverlayType.POLYGON,
            google.maps.drawing.OverlayType.POLYLINE,
            google.maps.drawing.OverlayType.RECTANGLE
          ]
        },
        markerOptions: {
          icon: 'images/beachflag.png'
        },
        polylineOptions: {
          strokeOpacity: 0,
          strokeWeight: 3,
          icons: [{
            icon: lineSymbol,
            offset: '0',
            repeat: '10px'
          }],
        }
      });
      drawingManager.setMap(map);
    }

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

是否允许在多段线的所需点（节点）中实现正确的破折号？

Are the methods that allow to achieve correct breaking dash in the desired point(node) of polyline?

drawing

polyline

google-maps-api-3