欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Google地图实时轨迹

程序员文章站 2022-07-13 15:17:53
...

基于谷歌地图的marker和Polyline，做的行驶轨迹渲染。关于坐标会有偏移问题。最好上报点位的时候进行纠偏、去噪、绑路。

<!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=谷歌key&sensor=false&libraries=drawing,places"></script>
<script language="javascript">
var map;
var lineSymbol = {
	path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
	//scale: 2,
	strokeColor: "#000"
  };
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 )
  ];
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);
	  addMarker(lineCoordinates[0],'car.png','起点');
      //圆移动
	  line = new google.maps.Polyline({
		path: lineCoordinates,
		icons: [{
		  icon: lineSymbol,
		  offset: '0%'
		}],
		map: map,
		strokeColor: "#f30", // 线条颜色 红色
		strokeOpacity: 0.7, // 透明度 70%
		strokeWeight: 5 // 宽度 5像素
	  });

	  animateCircle();
		  
		  	
}
function addMarker(position, icon,title) {
	// Add a new marker at the new plotted point on the polyline.
	new google.maps.Marker({
		position : position,
		title : title,
		map : map,
		icon : icon
	});
}
/**
* 设置点位并启动动画移动特效
*/
function setLatLng(lat,lng){
	var latLngObj = new google.maps.LatLng(lat,lng);
	line.set("icons",null);
	line = new google.maps.Polyline({
		path: [lineCoordinates[lineCoordinates.length-1],latLngObj],
		icons: [{
		  icon: lineSymbol,
		  offset: '0%'
		}],
		map: map,
		strokeColor: "#f30", // 线条颜色 红色
		strokeOpacity: 0.7, // 透明度 70%
		strokeWeight: 5 // 宽度 5像素
	  });
	  lineCoordinates.push(latLngObj);
	var path = line.getPath(latLngObj);
	//path.push(new google.maps.LatLng(30.665939,104.071278));
	//path.push(latLngObj);
	map.setCenter(latLngObj);
	 animateCircle();
}
/**
* 动态加载 点位数据 ，进行动画显示
* 此处可使用ajax 拉取点位数据，
*/
function dynamic(){
	window.setInterval(function() {
	var lat= 30.655939+Math.random().toFixed(3)/100;
	var lng=104.06594494+Math.random().toFixed(5)/100;
	setLatLng(lat,lng);
	},5000);
}
//移动
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);
      }
      
  }, 10);
}
google.maps.event.addDomListener(window, 'load', initialize);

</script> 
 
</head> 
 
<body> 
 
  <div id="mapContainer"></div> 
 
</body> 
 
</html>

Google地图实时轨迹

相关标签： google 谷歌地图 轨迹回放

上一篇： 百度地图离线API（二）——轨迹回放

下一篇： js实现完美拖拽效果可记录拖拽诡计

推荐阅读