高德地图轨迹回放、路径规划以及计算面积（超详细！！）

最新推荐文章于 2023-01-08 22:09:23 发布

Arrow_Yzw

最新推荐文章于 2023-01-08 22:09:23 发布

阅读量4.7k

点赞数 4

分类专栏：前端问题总结文章标签： javascript map html5 前端 api

本文链接：https://blog.csdn.net/YzwSfyyyy/article/details/111163942

版权

本文详细介绍了如何利用高德地图API实现路径规划、区域规划及轨迹回放功能。通过基础地图设置，结合后端数据或本地JSON文件，实现了路线的绘制。重点展示了轨迹回放的HTML、CSS和JS代码实现，最终效果中，蓝色轨迹线与红色路径线、绿色区域线并存，点击按钮可模拟小车沿蓝色轨迹移动。

摘要由CSDN通过智能技术生成

主要涉及到高德地图的路径规划、区域规划以及轨迹回放功能。

一、基础设置：地图

//创建地图
    var map = new AMap.Map('map',{
   
        zoom:17,//视角级别
        //中心点坐标
        // pitch:45,
        layers: [//使用多个图层
            new AMap.TileLayer.Satellite(),
            new AMap.TileLayer.RoadNet()
        ],
        viewMode:'3D',//使用3D视图
        resizeEnable: true
  });

//设置地图属性
  //地图类型
  map.plugin(["AMap.MapType"],function(){
   
    //地图类型切换
    var type= new AMap.MapType({
   
    
    });
    map.addControl(type);
  });
  //鹰眼
  map.plugin(["AMap.OverView"],function(){
   
      view = new AMap.OverView();
      map.addControl(view);
  }); 
  //标记点
  map.plugin(["AMap.MouseTool"],function(){
    
      var mousetool = new AMap.MouseTool(map); 
      mousetool.marker(); //使用鼠标工具，在地图上画标记点 
      
  });
  //计算面积
  map.plugin(["AMap.MouseTool"</