高德地图行车轨迹

最新推荐文章于 2024-10-11 17:39:47 发布

功能点分享

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量550

点赞数 21

分类专栏： html 文章标签： javascript

本文链接：https://blog.csdn.net/qq_33476262/article/details/135566485

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

高德地图行车轨迹

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width" />
    <title>行车轨迹</title>
    <style>
	
.box{ width:100%; height:100vh; display:block; overflow:hidden; }	
      #container {
        width:100vw;
        height: 100vh;
		margin:0; padding:0;
		display: block; float:left;
      }
    </style>
  </head>
  <body>
  <div class="box">
    <div id="container"></div>
    
      <input type="button" class="btn" value="开始动画" id="start" onclick="startAnimation()" style=" width:100px; height:100px; display:block; position:fixed;top:100px; z-index:999 "/>
  </div>
  </body>
</html>

js 部分

 <script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: "xxxxxx",  //高德地图的秘钥
  };
</script>

<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
  AMapLoader.load({
    key: "xxxxxxx", //申请好的Web端开发者 Key，调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
	plugins: ["AMap.MoveAnimation"], //加载高德地图动画插件
  }).then((AMap) => {
      const map = new AMap.Map("container",{
		  zoom:8, //地图级别
          center: [108.27331,22.78121], // 设置地图中心点
		  });	
			var markers = [ //地图上的定位点数组
			   {
				   coordinate:[108.30, 22.75],  // 地图上的金纬度
				   img:'images/shdz.png',    // 标注点图标
			   },
			     {
				   coordinate:[108.881058, 22.875931],
				   img:'images/shdz.png',
			   },
			    {
				   coordinate:[108.8103, 23.21768],
				   img:'images/shdz.png',
			   },
			   {
				   coordinate:[109.22238,23.7521],
				   img:'images/shdz.png',			   
			   }
			   ];
			// 把数组循环到地图上
			for (var i = 0; i < markers.length; i++) {
				var marker = new AMap.Marker({
					position: markers[i].coordinate,
				    icon:new AMap.Icon({            
			          image:markers[i].img,
			          size: new AMap.Size(60, 60),  //图标所处区域大小
			          imageSize: new AMap.Size(60,60) //图标大小
		              }),       
		            offset: new AMap.Pixel(-30, -60), 
				    map: map					
				});
			}
// 定义纯坐标数组		
var arr_markers = [];					
 for (var i = 0; i < markers.length; i++) {
	  arr_markers.push(markers[i].coordinate);  // 获取纯坐标
	 }
 
 // 定义小车图标
  car_img = new AMap.Marker({
            map: map,
            position: [108.30, 22.75],
            icon: "images/car.png",
            offset: new AMap.Pixel(-13, -26),
        }); 
        
      //绘制行车轨迹
        var polyline = new AMap.Polyline({
            map: map,
            path: arr_markers,
            showDir:true,
            strokeColor: "#28F",  //线颜色
            strokeWeight: 6,      //线宽       
        });
		
		//绘制小车经过的轨迹
       var passedPolyline = new AMap.Polyline({
            map: map,
            strokeColor: "#AF5",  //线颜色
            strokeWeight: 6,      //线宽
        });
      
	  // 小车经过改变线的颜色
       car_img.on('moving', function (e) {
            passedPolyline.setPath(e.passedPath);
            map.setCenter(e.target.getPosition(),true)
        });
        map.setFitView(); 
		
		// 点击开始行车动画
		  window.startAnimation = function startAnimation () {
            car_img.moveAlong(arr_markers, {
                // 每一段的时长
                duration: 5000,//可根据实际采集时间间隔设置
                // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
                autoRotation: true,
            });
        };		  
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });		
</script>