Sind die Methoden, die es ermöglichen, den richtigen Bruchstrich im gewünschten Punkt (Knoten) der Polylinie zu erreichen?

Ich verwende die Google Maps-Zeichnungsbibliothek und versuche, eine gestrichelte Polylinie zu erstellen. Ich erstelle den Pfad gemäß der Dokumentation. Aber ich kann die Bindestriche nicht gut an den Ecken der Polylinie ausrichten.Sind die Methoden, die es ermöglichen, den richtigen Bruchstrich im gewünschten Punkt (Knoten) der Polylinie zu erreichen?

Hier ist ein Beispiel für meinen Code (um die gestrichelte Linie zu erstellen): jsfiddle.

Here's what the result looks like.

Quelle

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

Auf Sache, die Sie erhalten, der vorhandene API-Code scheint nicht auf 1 oder 2 Je kleiner das „Strich“ Symbol ist die besseren Ergebnisse helfen, das Ausmaß des Symbols zu ändern um das Symbol am letzten Eckpunkt eines Polyliniensegments abzuschneiden, und scheint nicht den Abschnitt des Symbols zu berücksichtigen, der nach dem Eckpunkt über die Polylinie hinausgegangen ist.

Wenn Sie das Symbol von Google's example (mit seiner ursprünglichen Skala von 4 verwenden, hat es immer noch Probleme Ändern der Skala zu 2 und die Wiederholung zu 10px scheint besser (noch nicht „perfekt.“):

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

Code-Schnipsel:

<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>

Quelle

2016-12-01 15:10:12 geocodezip

danke –

Wie geocodezip http://joxi.ru/82QWN1RIj9NjMr nächsten Pfad der Polylinie zu schreiben? –

Ich bin mir nicht sicher, was Sie fragen (aber es ist wahrscheinlich eine neue/andere Frage). Wenn dies Ihre ursprüngliche Frage beantwortet hat, bitte [akzeptieren] (http://meta.stackoverflow.com/questions/5234/how-does-accepting-an-answer-work) – geocodezip

Sind die Methoden, die es ermöglichen, den richtigen Bruchstrich im gewünschten Punkt (Knoten) der Polylinie zu erreichen?

Antwort

Verwandte Themen