Question

我正在尝试创建一个Google地图应用，以直线显示从源到目的地的路线（'当乌鸦飞过'）。我有一般的应用程序工作。我可以放入一个开始和结束目的地，它将从头到尾慢慢画一条线。此外，我有一个通用标记，从头到尾沿着直线路线移动。我想要做的是用自定义绘制标记替换通用标记。此外，我希望自定义标记定向，以便它与路线一致。换句话说，如果自定义标记是汽车，我会希望汽车沿着路线朝向正确的方向。

我看到这个演示，但我不确定他们是如何做到的。 http://www.morethanamap.com/demos/visualization/flights

有什么建议吗？

谢谢！

Answer 1

您需要为折线设置IconSequence。 IconSequence需要一个Symbol，一个汽车的示例SVG：https://upload.wikimedia.org/wikipedia/commons/f/f6/Car.svg （©Pypaertv）

演示：

function initialize() {


  var origin = new google.maps.LatLng(39.904211, 116.407394),
    destination = new google.maps.LatLng(40.4167754, -3.703790),
    map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: origin,
      zoom: 3
    }),
    line = new google.maps.Polyline({
      geodesic: true,
      path: [origin, origin],
      icons: [{
        icon: {
          path: 'M 236.54427,9.8485 C 220.2445,9.8485 204.45277,15.405415 191.41289,25.550223 L 97.337229,97.995127 L -135.0706,131.12201 C -150.90459,133.65817 -161.13586,149.44963 -156.32358,165.14237 L -132.57022,244.60846 L -86.188678,244.60846 C -90.823109,289.62242 -60.00389,319.2235 -20.679452,319.2235 C 18.644986,319.2235 49.844083,285.73585 44.829779,244.60846 L 425.19586,244.60846 C 419.65783,289.49008 452.23789,319.2235 490.70508,319.2235 C 529.17227,319.2235 561.22444,285.70267 556.21433,244.60846 L 651.04018,244.60846 C 659.88863,244.60846 667.48002,236.98237 667.48,227.63005 L 667.48,137.76012 C 667.48,129.20037 661.30023,122.08284 653.22799,120.97335 L 491.76774,97.995127 L 427.82125,32.635149 C 413.84999,18.051989 394.74442,10.165524 374.56372,9.8485 L 236.54427,9.8485 z M 304.42883,37.42226 L 378.62679,37.42226 C 389.64854,37.42226 399.73373,43.261111 405.94316,52.613356 L 424.25825,80.825395 C 428.78955,88.722668 423.85522,96.409133 415.38198,97.803717 L 304.42883,97.803717 L 304.42883,37.42226 z M 224.60508,37.549916 L 283.42586,37.549916 L 283.42586,97.803717 L 132.59212,97.803717 L 200.10167,45.97523 C 207.08728,40.585799 215.91189,37.549914 224.60508,37.549916 z',
          scale: .05,
          fillColor: 'blue',
          fillOpacity: 1,
          rotation: 90,
          anchor: new google.maps.Point(0, 200)
        },

        offset: '100%'
      }]
    }),

    pct = 0,
    timer = setInterval(function() {

      pct += .002;

      line.setPath([origin, google.maps.geometry.spherical.interpolate(origin, destination, pct)]);
      line.setMap(map);
      map.setCenter(line.getPath().getAt(1));
      if (pct >= 1) clearInterval(timer)
    }, 50);




}

google.maps.event.addDomListener(window, 'load', initialize);

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

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>

Google Maps API自定义标记动画和沿路径

1 个答案: