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

我使用谷歌地图绘图库并尝试构建虚线折线。我按照文档创建路径。但我无法将折线很好地排列在折线的顶点。是否允许在折线的所需点（节点）中实现正确的破折号破折号的方法？

下面是我的代码示例（构建虚线）：jsfiddle。

2016-12-01 алексей

类的东西，这将有助于对图标的规模更改为1或2的“冲刺”标志是更好的结果，你会得到较小，现有的API代码似乎并不在多段线段的最后一个顶点切断符号，并且似乎不考虑在顶点之后经过多段线的符号部分。

如果使用从Google's example符号（与原来的4比例，它仍然有问题的规模更改为2，重复为10px似乎更好（依然没有“完美”）：

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>

来源

2016-12-01 15:10:12 geocodezip

谢谢geocodezip –

如何写折线http://joxi.ru/82QWN1RIj9NjMr的一个路径？ –

我不确定你在问什么（但它可能是一个新的/不同的问题）。如果这回答您的原始问题，请[接受它]（http://meta.stackoverflow.com/questions/5234/how-does-accepting-an-answer-work） – geocodezip

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

回答

相关问题