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

Question

我正在尝试使用带动画的谷歌地图创建飞行路线。是否可以像 http://www.morethanamap.com/demos/visualization/flights 的演示站点中那样使用飞机的自定义符号创建折线路径

我能够创建带动画的虚线路径。问题是我一直坚持创建 SVG 路径。我确实尝试从 https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths 渲染贝塞尔曲线路径为“M10 10 C 20 20、40 20、50 10”，但无济于事。

new google.maps.Polyline({
                    path: [
                        new google.maps.LatLng(40, -80),
                        new google.maps.LatLng(-50, 80)
                    ],
                    geodesic: true,
                    strokeOpacity: 0.0,
                    strokeColor: 'yellow',
                    icons: [{
                            icon: {
                                path: 'M 0,-2 0,2',
                                strokeColor: 'red',
                                strokeOpacity: 1.0,
                            },
                            repeat: '24px'
                        }],
                    map: map,
                });

Answer 1

该演示中使用的 SVG 路径是:

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-3    2.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

我将其粘贴到 this demo online svg editor 中，并缩放以适合。

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

working example

proof of concept fiddle

代码片段:

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>