web-dev-qa-db-ja.com

Google Maps V3ですべてのポリラインセグメントに矢印を描く方法

私はスタックオーバーフローでこの問題の解決策を探していましたが、正確な解決策が見つからなかったので、自分で解決してここに投稿しました。

Googleマップはポリライン機能を提供します。ポリライン機能は、座標のリストに基づいて、それらすべてを結ぶ一連の線を描くことができます。

次のコードを使用して、単一の矢印でポリラインを描くことができます。

     var allCoordinates = [
        new google.maps.LatLng(26.291, 148.027),
        new google.maps.LatLng(26.291, 150.027),
        new google.maps.LatLng(22.291, 153.027),
        new google.maps.LatLng(18.291, 153.027)
    ];

     var polyline = new google.maps.Polyline({
            path: allCoordinates,
            strokeColor: color,
            strokeOpacity: 1.0,
            strokeWeight: 2,
            geodesic: true,
            icons: [{
                icon: {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW},
                offset: '100%'
            }]
        });

ここでの問題は、次の図に示すように、矢印が最後のセグメントにのみ描画されることですが、ルートがそれほど単純ではなく、すべてのセグメントに矢印を追加する必要がある場合があります。

アイコン定義内の属性「繰り返し」は別のオプションである可能性がありますが、ピクセル単位でメジャーを定義することのみを許可し、その定義はポリラインの方向のすべての変化と一致しません。

PICTURE1

したがって、これを実現するために見つけた1つの方法は、セグメントごとに1つずつ、複数のポリラインを作成することでした。この場合、それぞれに矢印を描画できます。これはコードです：

     var allCoordinates = [
        new google.maps.LatLng(26.291, 148.027),
        new google.maps.LatLng(26.291, 150.027),
        new google.maps.LatLng(22.291, 153.027),
        new google.maps.LatLng(18.291, 153.027)
    ];

    for (var i = 0, n = allCoordinates.length; i < n; i++) {

        var coordinates = new Array();
        for (var j = i; j < i+2 && j < n; j++) {
            coordinates[j-i] = allCoordinates[j];
        }

        var polyline = new google.maps.Polyline({
            path: coordinates,
            strokeColor: color,
            strokeOpacity: 1.0,
            strokeWeight: 2,
            geodesic: true,
            icons: [{
                icon: {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW},
                offset: '100%'
            }]
        });
        polyline.setMap(map);
        polylines.Push(polyline);

    }

そしてこれは画像です：

PICTURE2

これがこのようなものを探している誰にとってもうまくいくことを願っています！

javascriptgoogle-mapsgoogle-maps-api-3polylinesegment
14
Martín C

アイコンオプションオブジェクトには、繰り返しプロパティがあります。 Google Maps JS APIの破線の例 は、新しいポリラインを作成する代わりに、ライン上にシンボルを繰り返すことでこれを行う方法を示しています。あなたの例の文脈では、それは次のようになります：

var allCoordinates = [
    new google.maps.LatLng(26.291, 148.027),
    new google.maps.LatLng(26.291, 150.027),
    new google.maps.LatLng(22.291, 153.027),
    new google.maps.LatLng(18.291, 153.027)
];

var polyline = new google.maps.Polyline({
    path: allCoordinates,
    strokeColor: color,
    strokeOpacity: 1.0,
    strokeWeight: 2,
    geodesic: true,
    icons: [{
        icon: {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW},
        offset: '100%',
        repeat: '20px'
    }]
});
polyline.setMap(map);
polylines.Push(polyline);

これにより、次のように線に沿って矢印が作成されます。

map

8
coderroggie

これは、シンプルなループとカスタムシンボルを備えたバージョンであり、必要に応じてサイズを変更したり変更したりできます-google.maps.SymbolPath.FORWARD_CLOSED_ARROWは固定サイズです。scaleプロパティは影響を受けません。

const drawLines = (map, maps, places) => {
  const arrow = {
    path: 'M 0,0 5,15 -5,15 0,0 z', // 0,0 is the tip of the arrow
    fillColor: 'red',
    fillOpacity: 1.0,
    strokeColor: 'red',
    strokeWeight: 1,
  };
  const newLines = [];
  for (let i = 0; i < places.length - 1; i++) {
    const line = new maps.Polyline({
      path: places.slice(i, i+2),
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2,
      icons: [{
        icon: arrow,
        offset: '100%',
      }]
    });
    line.setMap(map);
    newLines.Push(line);
  }
}

map

1
Brian Burns