Пользовательская анимация символов не соответствует пути полилинии

Question

Я использую API карт Google для отображения траектории полета. Я использую полилинию и пользовательский SVG-путь в качестве значка плоскости.

Проблема заключается в том, что символ svg отображается за пределами полилинии, и я не могу определить способ разместить его поверх полилинии.

Поскольку это не google.maps.Symbol, я не могу использовать свойство anchor.

Вот CODEPEN

Это мой код:

var map; 

function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: 55.696242, lng: 12.593639}, 
     zoom: 4 
    }); 

    var lineSymbol = { 
     path: 'M 157.98695,184.38488 L 173.37483,168.20017 C 182.38616,159.18884 197.56012,162.31477 197.56012,162.31477 L 242.58958,168.47612 L 265.39575,146.16045 C 277.41087,134.35989 288.26269,152.4142 283.54247,158.63631 L 271.83305,172.24635 L 320.32641,181.22794 L 336.78707,162.03882 C 354.38063,141..47041,159.95529 359.53185,171.11218 L 348.89521,184.56906 L 421.75804,194.07153 C 484.40828,133.78139 509.98537,108.77262 526.46939,123.63021 C 543.05967,138.5836 513.71315,168.38877 456.64135,227.17701 L 467.00204,302.24678 L 482.26714,289.52597 C 491.27847,282.01653 507.27901,294.06392 490.75822,309.72648 L 469.76089,329.52825 L 478.61969,378.66527 L 491.73923,368.58052 C 503.32523,359.35463 517.39476,371.55518 501.7322,388.29052 L 480.88803,409.28786 C 480.02981,409.93153 487.69305,452.38631 487.69305,452.38631 C 492.41327,473.19821 480.67347,480.80195 480.67347,480.80195 L 466.35838,493.27782 L 411.97962,339.67439 C 407.47395,326.15738 396.0546,311.47862 376.97351,313.22076 C 366.8894,314.29354 341.41552,331.49026 337.98263,335.56682 L 279.00579,392.27531 C 277.5039,393.34809 288.07915,465.99635 288.07915,465.99635 C 288.07915,468.14191 269.38054,492.66454 269.38054,492.66454 L 232.01433,426.14725 L 213.56128,434.7301 L 224.35108,417.93211 L 157.06733,379.9526 L 182.29502,361.49956 C 194.31014,364.28878 257.3034,371.36975 258.59073,370.72608 C 258.59073,370.72608 309.88762,319.85344 312.81633,316.77643 C 329.76623,298.96831 335.46935,292.31456 338.04402,283.51778 C 340.6208,274.71377 336.23117,261.81195 309.62838,245.4769 C 272.93937,222.94855 157.98695,184.38488 157.98695,184.38488 z', 
     scale: 0.025, 
     rotation: -30, 
     strokeColor: '#000', 
     fillColor: '#000', 
     fillOpacity: 1 
    }; 

    var pathOptions = { 
     geodesic: true, 
     strokeColor: 'green', 
     strokeOpacity: 1.0, 
     strokeWeight: 2, 
     icons: [{ 
      icon: lineSymbol, 
      offset: '100%' 
     }] 
    }; 

    var path = new google.maps.Polyline(pathOptions); 

    var start_point = new google.maps.LatLng(55.696242, 12.593639); 
    var end_point = new google.maps.LatLng(35.701369, 139.664309); 

    path.getPath().setAt(0, start_point); 
    path.getPath().setAt(1, end_point); 

    path.setMap(map); 

    animateCircle(path); 
} 

function animateCircle(line) { 
    var count = 0; 

    window.setInterval(function() { 
     count = (count + 1) % 200; 

     var icons = line.get('icons'); 
     icons[0].offset = (count/2) + '%'; 
     line.set('icons', icons); 
    }, 200); 
} 

Изменить: Я обнаружил, что проблема заключается в ротации, хотя я понятия не имею, почему. Если изменить поворот на 60, например, плоскость будет на полилинии, но она не будет указывать на направление полилинии.

Answer 1

Я не знаю, почему вы не думаете, что вы можете использовать anchor с Symbol, описано в документации:

Символ объекта спецификация

якорной | Тип: Точка | Позиция символа относительно маркера или полилинии. Координаты пути символа переводятся влево и вверх по координатам х и у якоря соответственно. По умолчанию символ привязывается к (0, 0). Позиция выражается в той же системе координат, что и путь символа.

Если я установил его и правильный поворот, символ следует полилинию:

proof of concept fiddle

фрагмент кода:

var map; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: 55.696242, 
 
     lng: 12.593639 
 
    }, 
 
    zoom: 4 
 
    }); 
 

 
    var lineSymbol = { 
 
    path: 'M 157.98695,184.38488 L 173.37483,168.20017 C 182.38616,159.18884 197.56012,162.31477 197.56012,162.31477 L 242.58958,168.47612 L 265.39575,146.16045 C 277.41087,134.35989 288.26269,152.4142 283.54247,158.63631 L 271.83305,172.24635 L 320.32641,181.22794 L 336.78707,162.03882 C 354.38063,141..47041,159.95529 359.53185,171.11218 L 348.89521,184.56906 L 421.75804,194.07153 C 484.40828,133.78139 509.98537,108.77262 526.46939,123.63021 C 543.05967,138.5836 513.71315,168.38877 456.64135,227.17701 L 467.00204,302.24678 L 482.26714,289.52597 C 491.27847,282.01653 507.27901,294.06392 490.75822,309.72648 L 469.76089,329.52825 L 478.61969,378.66527 L 491.73923,368.58052 C 503.32523,359.35463 517.39476,371.55518 501.7322,388.29052 L 480.88803,409.28786 C 480.02981,409.93153 487.69305,452.38631 487.69305,452.38631 C 492.41327,473.19821 480.67347,480.80195 480.67347,480.80195 L 466.35838,493.27782 L 411.97962,339.67439 C 407.47395,326.15738 396.0546,311.47862 376.97351,313.22076 C 366.8894,314.29354 341.41552,331.49026 337.98263,335.56682 L 279.00579,392.27531 C 277.5039,393.34809 288.07915,465.99635 288.07915,465.99635 C 288.07915,468.14191 269.38054,492.66454 269.38054,492.66454 L 232.01433,426.14725 L 213.56128,434.7301 L 224.35108,417.93211 L 157.06733,379.9526 L 182.29502,361.49956 C 194.31014,364.28878 257.3034,371.36975 258.59073,370.72608 C 258.59073,370.72608 309.88762,319.85344 312.81633,316.77643 C 329.76623,298.96831 335.46935,292.31456 338.04402,283.51778 C 340.6208,274.71377 336.23117,261.81195 309.62838,245.4769 C 272.93937,222.94855 157.98695,184.38488 157.98695,184.38488 z', 
 
    scale: 0.025, 
 
    rotation: -45, 
 
    strokeColor: '#000', 
 
    fillColor: '#000', 
 
    fillOpacity: 1, 
 
    anchor: new google.maps.Point(500, 170) 
 
    }; 
 

 
    var pathOptions = { 
 
    geodesic: true, 
 
    strokeColor: 'green', 
 
    strokeOpacity: 1.0, 
 
    strokeWeight: 2, 
 
    icons: [{ 
 
     icon: lineSymbol, 
 
     offset: '100%' 
 
    }] 
 
    }; 
 

 
    var path = new google.maps.Polyline(pathOptions); 
 

 
    var start_point = new google.maps.LatLng(55.696242, 12.593639); 
 
    var end_point = new google.maps.LatLng(35.701369, 139.664309); 
 

 
    path.getPath().setAt(0, start_point); 
 
    path.getPath().setAt(1, end_point); 
 

 
    /* var m = new google.maps.Marker({ 
 
      map: map, 
 
      position: start_point, 
 
      icon: lineSymbol, 
 
      zIndex: -1 
 
     }); 
 
     var p = new google.maps.Marker({ 
 
      map: map, 
 
      position: start_point, 
 
      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) 
 
      }, 
 
      zIndex: 1 
 
     }); 
 
    */ 
 
    path.setMap(map); 
 

 
    animateCircle(path); 
 
} 
 

 
function animateCircle(line) { 
 
    var count = 0; 
 

 
    window.setInterval(function() { 
 
    count = (count + 1) % 200; 
 

 
    var icons = line.get('icons'); 
 
    icons[0].offset = (count/2) + '%'; 
 
    line.set('icons', icons); 
 
    }, 200); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>