Google地图轨迹回放模拟

最新推荐文章于 2024-06-19 17:33:44 发布

三片叶子贰

最新推荐文章于 2024-06-19 17:33:44 发布

阅读量1.7k

点赞数 2

分类专栏：地图开发

地图开发专栏收录该内容

1 篇文章 1 订阅

订阅专栏

<!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>

三片叶子贰

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google地图轨迹回放模拟

<!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 ...
复制链接

扫一扫