javascript - 不遵循折线路径的自定义符号动画

Question

我正在使用谷歌地图 API 来显示飞行路径。我使用折线和自定义 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.01237 367.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);
}

编辑:我发现问题出在旋转上，尽管我不知道为什么。例如，如果我将旋转 Angular 更改为 60，平面将位于折线上，但不会指向折线方向。

Answer 1

我不确定为什么你认为你不能将 anchor 与 Symbol 一起使用，它在文档中有描述:

符号对象规范

anchor | Type: Point | The position of the symbol relative to the marker or polyline. The coordinates of the symbol's path are translated left and up by the anchor's x and y coordinates respectively. By default, a symbol is anchored at (0, 0). The position is expressed in the same coordinate system as the symbol's path.

如果我设置它和正确的旋转，符号会跟随多段线:

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.01237 367.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>