2016-12-01 8 views
2

Googleマップ描画ライブラリを使用して、破線のポリラインを作成します。私はドキュメントに従ってパスを作成します。しかし、私はポリラインの頂点にうまく整列するようにダッシュを得ることはできません。ポリラインの目的のポイント(節点)で正しい破断ダッシュを達成できるメソッドはありますか?

私のコード(破線を作成する)の例を以下に示します:jsfiddle。役立つもので

Here's what the result looks like.

答えて

1

小さい「ダッシュ」の記号は、あなたが得るより良い結果である1または2にアイコンのスケールを変更することで、既存のAPIコードは思えません。ポリラインセグメントの最後の頂点でシンボルを切り取り、頂点の後にポリラインを通過したシンボルのセクションを考慮していないようです。

あなたは4の元の規模に(Google's exampleからシンボルを使用する場合、それはまだ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

screenshot of dashed polyline

コードスニペット:

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

+0

あなたはポリラインhttp://joxi.ru/82QWN1RIj9NjMrの次のパスを作成する方法 –

+0

をgeocodezip感謝? –

+0

私はあなたが何を求めているのかは分かりません(しかし、それはおそらく新しい/別の質問です)。これが元の質問に答えた場合は、[同意してください](http://meta.stackoverflow.com/questions/5234/how-does-accepting-an-answer-work) – geocodezip

関連する問題