Google Haritalar'da her polyline segmentinde bir ok nasıl çizilir V3

Question

Yığınlama akışında bu soruna bir çözüm arıyordum ama doğru çözümü bulamadığım için kendim çözdüm ve buraya gönderiyorum, umarım yardım et.

Google Maps, bir koordinat listesi temelinde tümünü birleştiren bir dizi çizgi çizebilen Polyline özelliğini sunar.

Aşağıdaki kod ile tek okla bir poligon çizebilirsiniz:

 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%' 
      }] 
     }); 

Buradaki sorun ok sadece bir sonraki resimde gösterildiği gibi son segmentte çizilmiş, ancak bazen edilecek olmasıdır rota çok kolay olmayabilir ve her segmente bir ok eklememiz gerekiyor.

Simge tanımındaki "tekrarla" özelliği başka bir seçenek olabilir, ancak yalnızca piksel cinsinden bir ölçüm tanımlamaya izin verir ve bu özellik, piksel çizgisindeki her yön değişikliği ile uyuşmayacaktır.

Yani, bir şekilde ben bu, bu durumda ok izin segmentin başına birer birinde çekilecek için birkaç polylines yapmaktı başarmak bulundu. Bu kodu verilmiştir:

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

    } 

Ve bu resim geçerli:

bu böyle bir şey arıyor herkes için çalışır umut!

Answer 1

Simge seçenekleri nesnesi için bir tekrar özelliği var. example of dashed lines from the Google Maps JS API, yeni Polylines oluşturmak yerine satırdaki sembolleri tekrar ederek bunu yapmanın bir yolunu gösterir. Örneğiniz bağlamında, şunun gibi bir şeye benziyordu:

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