直接上代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8" />
<title>Google地图轨迹回放测试</title>
<style type="text/css">
body, html,#mapContainer {width: 100%;height: 100%;overflow: hidden;margin:0;z-index: 1;}
</style>
<script src="http://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyAY-HsXXPsBUqsbQLDFO8kpNWLANwH0E7k&sensor=false&libraries=drawing,places"></script>
<script language="javascript">
var map;
var markers = [];
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(30.65721817, 104.06594494),
zoom: 16,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
overviewMapControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('mapContainer'),mapOptions);
//圆移动
var lineCoordinates = [
new google.maps.LatLng(30.65721817, 104.06594494),
new google.maps.LatLng(30.656361,104.065477 ),
new google.maps.LatLng(30.652691, 104.066058 ),
new google.maps.LatLng( 30.652485,104.068823 ),
new google.maps.LatLng(30.655939,104.071278 )
];
var positions1 = {lat: 30.65721817, lng: 104.06594494};
var positions2 = {lat: 30.656361, lng: 104.065477};
var positions3 = {lat: 30.652691, lng: 104.066058};
var positions4 = {lat: 30.652485, lng: 104.068823};
var positions5 = {lat: 30.655939, lng: 104.071278};
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
//scale: 2,
strokeColor: '#393'
};
line = new google.maps.Polyline({
path: lineCoordinates,
icons: [{
icon: lineSymbol,
offset: '0%'
}],
map: map
});
animateCircle();
addMarker(positions1);
addMarker(positions2);
addMarker(positions3);
addMarker(positions4);
addMarker(positions5);
function addMarker(location) {
var marker = new google.maps.Marker({
title: '轨迹信息',
position: location,
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
markers.push(marker);
}
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Shows any markers currently in the array.
function showMarkers() {
setMapOnAll(map);
}
showMarkers();
//创建窗体信息
var html=[];
html.push("<div style='width:250px;height:106px;'>");
html.push("<b>轨迹信息</b>");
html.push("<div><span style='font-weight:bold'>时间:2019-07-25 14:29:35</span>");
html.push("<div style=\'font-weight:bold\'>经度：118.20015121</div>");
html.push("<div style=\'font-weight:bold\'>纬度：23.20015121</div>");
html.push("</div>");
html.push("</div>");
var infowindow= new google.maps.InfoWindow({
content: html.join(''),
disableAutoPan:true //设置为true时可禁用自动平移功能，可通过PanTo方法来平移到指定位置,如果设置为false,可不使用panTo（）方法
});
infowindow.open(map, markers[0]);//打开信息窗体
new google.maps.event.trigger( markers[0], 'click' );
// infowindow.open(map, markers[1]);//打开信息窗体
// infowindow.open(map, markers[2]);//打开信息窗体
// infowindow.open(map, markers[3]);//打开信息窗体
// infowindow.open(map, markers[4]);//打开信息窗体
//marker点事件，点击关闭信息窗体
// marker.addListener('click', function() {
// infowindow.close();
// })
//监听X关闭按钮事件
google.maps.event.addListener(infowindow,"closeclick", function()
{
infowindow.close();
});
// ---------------------
// 作者：P_Alex
// 来源：CSDN
// 原文：https://blog.csdn.net/longchenghui20/article/details/75171752
// 版权声明：本文为博主原创文章，转载请附上博文链接！
}
//圆移动
function animateCircle() {
var count = 0;
var animate1=window.setInterval(function() {
count = (count + 1) % 200;
var icons = line.get('icons');
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
//终点停车
/*
if((count / 2)>=99){
clearInterval(animate1);
}
*/
}, 20);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="mapContainer"></div>
</body>
</html>
