Google地图轨迹回放模拟

最新推荐文章于 2024-08-17 12:15:00 发布

weixin_30940783

最新推荐文章于 2024-08-17 12:15:00 发布

阅读量166

点赞数

原文链接：http://www.cnblogs.com/boonya/p/3296019.html

版权

<!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;
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 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();
}
//圆移动
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>