使用SVG路径在折线上创建自定义符号

function initialize() {
    var mapOptions = {
      zoom: 6,
      center: new google.maps.LatLng(20.291, 153.027),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

    // [START region_polyline]
    // Define a symbol using SVG path notation, with an opacity of 1.
    var planeSymbol = {

      path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
      scale: 0.0333,
      strokeOpacity: 1,
      color: 'black',
      strokeWeight: 1,
      anchor: new google.maps.Point(300, 300)
    };
    var lineCoordinates = [
      new google.maps.LatLng(22.291, 154.027),
      new google.maps.LatLng(21.291, 155.027),
      new google.maps.LatLng(20.291, 156.027),
      new google.maps.LatLng(45.291, 158.027),

      new google.maps.LatLng(51.47238, -0.45093999999994594)
    ];
    var visibleLine = new google.maps.Polyline({
      path: lineCoordinates,
      strokeOpacity: 0.3,
      map: map
    });

    var staticMark = new google.maps.Marker({
      map: map,
      position: lineCoordinates[0],
      icon: planeSymbol,
      visible: false // hide the static marker
    });
    var bounds = new google.maps.LatLngBounds();
    bounds.extend(lineCoordinates[0]);
    bounds.extend(lineCoordinates[4]);
    // Create the polyline, passing the symbol in the 'icons' property.
    // Give the line an opacity of 0.
    var line = new google.maps.Polyline({
      path: lineCoordinates,
      strokeOpacity: 0,
      icons: [{
        icon: planeSymbol,
        offset: '0'
      }],
      map: map
    });
    map.fitBounds(bounds);
    animatePlane(line);

    // [END region_polyline]
  }
  // Use the DOM setInterval() function to change the offset of the symbol
  // at fixed intervals.

function animatePlane(line) {
  var count = 0;
  window.setInterval(function() {
    count = (count + 1) % 2000;

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

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

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