原文地址 点这
自己实现google地图动画轨迹
上一篇我们讲到google给的示例代码中实现了轨迹动画，可惜轨迹是从一开始就画出来的，不能满足动态生成轨迹的要求，那我们该咋么办呢？
别担心，googleAPI为我们想到了这个问题，虽然他没有直接提到这种轨迹的demo，但是给我们提供了很多的小例子，比如动态画点，动态生成连线，动态更换图标等的小例子，废话不多说，先给出演示效果
那么如何实现上面的动态效果呢，先给出我参考的例子
https://developers.google.com/maps/documentation/javascript/examples/polyline-complex?hl=zh-cn
但是有这个例子还不够，示例实现了点击画线的功能，但是如何让这些点每隔一段时间出现一个点呢？我使用了js的sleep方法，当然js没有这个函数，所以间接调用了js的setTimeout()函数，代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Complex Polylines</title>
<style>
html,body,#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script>
var neighborhoods = [new google.maps.LatLng(52.511467, 13.447179), new google.maps.LatLng(52.549061, 13.422975), new google.maps.LatLng(52.497622, 13.396110), new google.maps.LatLng(52.517683, 13.394393)];
var poly;
var map;
var markers = [];
var lastIndex=-1;
var iterator = 0;
//小车图标
var icon1 = 'image/1.jpg';
//轨迹点图标
var icon2 = 'image/2.jpg';
function initialize() {
var mapOptions = {
zoom : 16,
// Center the map on Chicago, USA.
center : new google.maps.LatLng(parseFloat(52.511467, 13.447179)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var polyOptions = {
strokeColor : '#000000',
strokeOpacity : 1.0,
strokeWeight : 3
};
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
drop();
}
//此处调用了setTimeout函数，i*2000是指距离第一次执行的时间
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
setTimeout(function() {
addMarker();
}, i * 2000);
}
}
function addMarker() {
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear.
path.push(neighborhoods[iterator]);
if (iterator > 0) {
markers[iterator - 1].setIcon(icon2);
}
neighborhoods[iterator]
// Add a new marker at the new plotted point on the polyline.
markers.push(new google.maps.Marker({
position : neighborhoods[iterator],
title : '#' + path.getLength(),
map : map,
icon : icon1
}));
map.panTo(neighborhoods[iterator]);
map.setCenter
iterator++;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
好的，现在我们实现了动画轨迹功能，那么如何给每个轨迹点添加点击事件显示信息呢？请继续关注我的下一篇博文 googleAPI点击显示窗口
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。