3

I am trying to create a flight route using google maps with animation. Is it possible to create a polyline path with custom symbol of airplane as in the demo site of http://www.morethanamap.com/demos/visualization/flights

I am able to create a dashed path with animation. The problem is I have am stuck with creating SVG path. I did try to render a Bezier Curves from https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths with path given as "M10 10 C 20 20, 40 20, 50 10" but to no avail.

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,
                });
4

2 回答 2

3

该演示中使用的 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

我将它粘贴到这个演示在线 svg 编辑器中，并按比例缩放以适应。

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

工作示例

概念证明小提琴

结果地图的屏幕截图

代码片段：

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>

于 2013-10-31T03:37:55.710 回答
1

您可以使用 Inkscape 之类的程序来绘制图像，导出为 SVG 并从源中复制路径。

这里是一个例子（需要 3 分钟）

M 8.1326447,0.80527736 C 8.5471666,0.063577346 9.742752,0.030177346 10.052431,0.82497736 C 10.093464,3.0114774 10.134497,5.1980774 10.17553,7.3845774 C 12.760407,8.9653774 15.345284,10.546179 17.930161,12.127079 C 17.930161,12.881779 17.930161,13.636479 17.930161,14.391179 C 15.373077,13.579479 12.815993,12.767779 10.258908,11.956179 C 10.27281,13.280479 10.286713,14.604879 10.300615,15.929279 C 10.8565,16.555879 11.412385,17.182479 11.96827,17.809079 C 12.25527,18.269479 12.437605,19.641079 11.59784,19.085079 C 10.804104,18.802179 10.010367,18.519179 9.21663,18.236279 C 8.3133108,18.620779 7.4099916,19.005279 6.5066724,19.389779 C 6.3952441,18.705879 6.2272708,17.857479 6.8519879,17.359679 C 7.2927717,16.882879 7.7335555,16.406079 8.1743393,15.929279 C 8.1465467,14.604879 8.1187541,13.280479 8.0909615,11.956179 C 5.5894706,12.824879 3.0879797,13.693479 0.58648883,14.562179 C 0.54479393,13.821679 0.50309893,13.081079 0.46140403,12.340579 C 3.0184842,10.717079 5.5755645,9.0935778 8.1326447,7.4700774 C 8.1326447,5.2484774 8.1326447,3.0268774 8.1326447,0.80527736 z
于 2013-10-30T10:37:22.857 回答