javascript - 动画符号 - Google map API

Question

我正在尝试使用此演示来为线条上的符号设置动画。

Google Maps API - Animating Symbols

我的问题是我想使用图像而不是 Google 符号，但是当我使用上面的代码时，图像没有显示，只显示 Google 符号。

这是相关代码。其余的都与示例中的完全一样。

var line = new google.maps.Polyline({
    path: lineCoordinates,
    map: map,
    icons: [{
        icon: 'icons/cannon.png',
        offset: '100%'
    }]
});

Answer 1

问题在于 google.maps.Polyline 仅接受 Symbol作为参数，而不是图像。

但是，希望并没有完全消失。您有两种不同的动画选项。

(1) 按照文档中的说明自行创建符号路径:

The symbol's path, which is a built-in symbol path, or a custom path expressed using SVG path notation. Required.

然后使用您在 google api 文档示例中使用的相同代码制作动画。

(2) 将您已更改为您喜欢的图像的动画标记出来。

<强> Js fiddle example about this

还链接下面代码的相关部分，请注意，我使用 requestAnimationFrame 来步进动画，因为它通常被称为制作动画的最佳实践。

JavaScript:

/**
 * requestAnimationFrame version: "0.0.17" Copyright (c) 2011-2012, Cyril Agosta ( <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf8e2e9f2f7b5fafcf4e8effab5fffeeddbfcf6faf2f7b5f8f4f6" rel="noreferrer noopener nofollow">[email protected]</a>) All Rights Reserved.
 * Available via the MIT license.
 * see: http://github.com/cagosta/requestAnimationFrame for details
 *
 * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 * http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 * requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
 * MIT license
 *
 */

( function() {

    if ( typeof window === 'undefined' )
        return

    if ( window.requestAnimationFrame )
        return window.requestAnimationFrame

    if ( window.webkitRequestAnimationFrame ) { // Chrome <= 23, Safari <= 6.1, Blackberry 10
        window.requestAnimationFrame = window[ 'webkitRequestAnimationFrame' ];
        window.cancelAnimationFrame = window[ 'webkitCancelAnimationFrame' ] || window[ 'webkitCancelRequestAnimationFrame' ];
        return window.requestAnimationFrame
    }

    // IE <= 9, Android <= 4.3, very old/rare browsers

    var lastTime = 0;

    window.requestAnimationFrame = function( callback, element ) {

        var currTime = new Date().getTime();
        var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) );
        var id = window.setTimeout( function() {
                callback( currTime + timeToCall );
            },
            timeToCall );
        lastTime = currTime + timeToCall;
        return id; // return the id for cancellation capabilities
    };

    window.cancelAnimationFrame = function( id ) {
        clearTimeout( id );
    };

    if ( typeof define === 'function' ) {
        define( function() {
            return window.requestAnimationFrame;
        } )
    }

} )();

/**
 * The application code
 *
 */
function initialize() {
  var myLatlng = new google.maps.LatLng(35, 105);
  var myOptions = {
    zoom: 5,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

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

  // Path we are animating along
  var route = new google.maps.Polyline({
    path: [
      new google.maps.LatLng(35, 110),
      new google.maps.LatLng(35, 100)
    ],
    map: map
  });

  // Marker object we are animation
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(35, 110),
    map: map,
    icon: "http://placehold.it/32/ff0000" // Change this image to one you want
  });

  // Handle to requestAnimationFrame
  var requestID,
      // How many times we move
      steps = 0;

  /**
   * Method for animating marker along the line
   *
   */
  var draw = function() {

    // Controlling the speed of animation
    requestID = requestAnimationFrame(draw);

    // Current position of the marker
    var pos = marker.getPosition();

    // Next position of the marker (we use - 0.1 from previous position)
    marker.setPosition(new google.maps.LatLng(pos.lat(), pos.lng() - 0.1));

    // If we have reached the end of the path - cancel animationFrame
    if (steps === 99) {
      cancelAnimationFrame(requestID); 
      return;
    }

    // Increasing steps
    steps++;

  };

  // Start animation
  draw();

}    

// Init
google.maps.event.addDomListener(window, 'load', initialize);

此外，如果 jsfiddle 示例在某个时候消失:

HTML:页面的所有常规标记，加上此:

<div id="map-canvas"></div>

CSS:

html, body {
  height: 100%;
}

#map-canvas {
    height:500px;
    width:500px;
}

此外，请记住包含谷歌地图 JavaScript。 :)

最后一点，不要这样做:

// Next position of the marker (we use - 0.1 from previous position)
marker.setPosition(new google.maps.LatLng(pos.lat(), pos.lng() - 0.1));

您还可以通过沿着从 MVCarray 接收到的位置行走来使用更复杂的路径，您可以通过调用从折线本身获取该位置:

// Path for marker
path = route.getPath();

演示了完整的示例 in this js fiddle example (注意:动画速度很快，因为示例仅使用折线路径中的 11 个 LatLng 位置。)

干杯。