Google地图实时轨迹

最新推荐文章于 2022-05-17 15:37:19 发布

cheneyfeng3

最新推荐文章于 2022-05-17 15:37:19 发布

阅读量2.2k

点赞数

分类专栏： google map 文章标签： google 谷歌地图轨迹回放

本文链接：https://blog.csdn.net/cheneyfeng3/article/details/102703036

版权

google map 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基于谷歌地图的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>

cheneyfeng3

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Google地图实时轨迹

基于谷歌地图的marker和Polyline，做的行驶轨迹渲染。关于坐标会有偏移问题。最好上报点位的时候进行纠偏、去噪、绑路。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ht...
复制链接

扫一扫