动画符号-谷歌地图API
Animating Symbols - Google Maps API
我正在尝试用这个演示来动画一个符号。
Google Maps API -动画符号
我的问题是我想使用图像而不是谷歌符号,但是当我使用上面的代码时,图像不显示,只有谷歌符号。
下面是相关代码。其余部分与示例完全相同。
var line = new google.maps.Polyline({
path: lineCoordinates,
map: map,
icons: [{
icon: 'icons/cannon.png',
offset: '100%'
}]
});
问题是google.maps.Polyline
只接受Symbol作为参数,而不接受图像。
然而,希望并没有完全消失。你有两个不同的动画选项。
(1)按照文档:
符号的路径,可以是内置的符号路径,也可以是自定义的路径使用SVG路径表示法表示。必需的。
然后用你在google api docs示例中使用的相同代码进行动画。
(2)动画标记,您已更改为您喜欢的图像。
Js的例子
还链接了下面代码的相关部分,请注意,我使用requestAnimationFrame来步进动画,因为它通常被认为是制作动画的最佳实践。
JavaScript:/**
* requestAnimationFrame version: "0.0.17" Copyright (c) 2011-2012, Cyril Agosta ( cyril.agosta.dev@gmail.com) 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;
}
另外,记得包含google maps 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();
关于的完整示例在这个js小提琴示例中演示(注意:动画很快,因为示例在折线路径中只使用了11个LatLng位置)
欢呼。
相关文章:
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 谷歌地图JS API+JSON-多个标记没有显示
- 标记的实时更新,无需加载页面谷歌地图API V3
- 覆盖在赢得'不允许点击下面的标记,谷歌地图api v3
- 谷歌地图Api和JS代码不工作
- 谷歌地图API-InfoBubble赢得't关闭-关闭()不会'不起作用
- 如何在多承诺链中处理谷歌地图API V3事件
- 地理定位api和谷歌地图出错
- 谷歌地图api和gMapsLatLonPicker
- 谷歌地图地点API地图未显示
- 当我使用高度百分比时,谷歌地图javascript api不会显示
- 谷歌地图API-“;toGeoJson”;返回几何体为null的对象
- 谷歌地图API v3:Initial View is Fine,but Gray Box with No Map if
- 为什么谷歌地图API's方法未从RequireJS中正确调用
- 使用谷歌地图api计算距离并将其设置在表格中<td>
- 使用谷歌地图API和phonegap显示当前位置+方向
- 使用谷歌地图api v3自动完成字段(法国大道、邮编、城市)
- 关于关键的API谷歌地图
- mark.setDragable(false)在API谷歌地图的main.js中抛出异常
- 隐藏标记出现后缩放- API谷歌地图V3