高德地图轨迹回放动态打点位置

最新推荐文章于 2024-09-26 15:08:21 发布

浪迹之水

最新推荐文章于 2024-09-26 15:08:21 发布

阅读量656

点赞数

文章标签： ui 前端 javascript

本文链接：https://blog.csdn.net/u012197726/article/details/129595050

版权

在这里插入图片描述
官方示例：https://lbs.amap.com/demo/amap-ui/demos/amap-ui-pathsimplifier/navigators

【自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用】

移动过程中动态打点和显示移动的原始数据位置信息
完整示例：（填入你的key和安全密钥）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  <title>Document</title>
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: '你的安全密钥',
    }
  </script>
  <!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=e35b8d4ab5121cedce8efb3082b29882"></script>  -->
  <style>
    #container {
      width: 600px;
      height: 680px;
    }

    .markerInfo {
      background: rgba(255, 255, 255, 0.7);
      padding: 2px 5px;
      border: 1px solid #ccc;
      white-space: nowrap;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <button id="start">开始</button>
  <button id="pause">暂停</button>
  <button id="resume">恢复</button>
  <!-- <button id="stop">停止</button> -->
  <div>
    地点：
    <span id="address" style="font-weight: 700;color: red;"></span>
  </div>
  <script src="https://webapi.amap.com/loader.js"></script>
  <script type="text/javascript">

    datas = [
      {
        "address": "山西省晋城市陵川县,苏村北270米",
        "lnglat": ["113.10855629405023", "35.81269943234685"]
      },
      {
        "address": "山西省晋城市陵川县陵礼线,有明大酒店东北193米",
        "lnglat": ["113.12345680410088", "35.80111703624581"]
      },
      {
        "address": "山西省晋城市陵川县陵礼线,椅掌村西南345米",
        "lnglat": ["113.14451056278224", "35.79194652608597"]
      },
      {
        "address": "山西省晋城市陵川县陵礼线,申庄村西北68米",
        "lnglat": ["113.14997744329868", "35.78614248055367"]
      },
      {
        "address": "山西省晋城市陵川县陵礼线,香山汽贸西南177米",
        "lnglat": ["113.25998005104937", "35.779381907209704"]
      },
      {
        "address": "山西省晋城市陵川县古陵路辅路,亮景苑东北17米",
        "lnglat": ["113.27251928376477", "35.766462457631754"]
      },
      {
        "address": "山西省晋城市陵川县古陵路辅路,亮景苑西北17米",
        "lnglat": ["113.27235281117208", "35.76643442785195"]
      }
    ]

    var map
    AMapLoader.load({
      "key": "你的key",              // 申请好的Web端开发者Key，首次调用 load 时必填
      "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      "plugins": ['AMap.Scale'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      "AMapUI": {             // 是否加载 AMapUI，缺省不加载
        "version": '1.1',   // AMapUI 版本
        "plugins": [],       // 需要加载的 AMapUI ui插件
      },
      "Loca": {                // 是否加载 Loca， 缺省不加载
        "version": '2.0'  // Loca 版本
      },
    }).then((AMap) => {
      map = new AMap.Map('container', {
        zoom: 13
      });
      map.addControl(new AMap.Scale());
      AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {
        if (!PathSimplifier.supportCanvas) {
          alert('当前环境不支持 Canvas！');
          return;
        }
        initPage(PathSimplifier, $);
      });

    }).catch((e) => {
      console.error(e);  //加载错误提示
    });

    function initPage(PathSimplifier, $) {
      var emptyLineStyle = {
        lineWidth: 0,
        fillStyle: null,
        strokeStyle: null,
        borderStyle: null
      };

      var pathSimplifierIns = new PathSimplifier({
        zIndex: 100,
        //autoSetFitView:true,
        map: map, //所属的地图实例
        getPath: function (pathData, pathIndex) {
          var points = pathData.path,
            lnglatList = [];
          for (var i = 0, len = points.length; i < len; i++) {
            lnglatList.push(points[i].lnglat);
          }
          return lnglatList;
          // return pathData.path;
        },
        getHoverTitle: function (pathData, pathIndex, pointIndex) {
          return null;
        },
        renderOptions: {
          //将点、线相关的style全部置emptyLineStyle
          pathLineStyle: emptyLineStyle,
          pathLineSelectedStyle: emptyLineStyle,
          pathLineHoverStyle: emptyLineStyle,
          keyPointStyle: emptyLineStyle,
          startPointStyle: emptyLineStyle,
          endPointStyle: emptyLineStyle,
          keyPointHoverStyle: emptyLineStyle,
          keyPointOnSelectedPathLineStyle: emptyLineStyle
        }
      });

      window.pathSimplifierIns = pathSimplifierIns;

      pathSimplifierIns.setData([{
        name: '测试',
        path: datas
      }]);
      function onload() {
        pathSimplifierIns.renderLater();
      }
      function onerror(e) {
        alert('图片加载失败！');
      }
      var navg1 = pathSimplifierIns.createPathNavigator(0, {
        loop: false,
        speed: 5000,
        pathNavigatorStyle: {
          width: 16,
          height: 32,
          //使用图片
          content: PathSimplifier.Render.Canvas.getImageContent('https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png', onload, onerror),
          strokeStyle: null,
          fillStyle: null,
          //经过路径的样式
          pathLinePassedStyle: {
            lineWidth: 6,
            strokeStyle: 'black',
            dirArrowStyle: {
              stepSpace: 15,
              strokeStyle: 'red'
            }
          }
        }
      });

      document.querySelector('#start').onclick = function () {
        clearMarker()
        navg1.start();
      }
      document.querySelector('#pause').onclick = function () {
        navg1.pause();
      }
      document.querySelector('#resume').onclick = function () {
        navg1.resume();
      }
      // document.querySelector('#stop').onclick = function () {
      //   navg1.stop();
      // }
      navg1.marker = new AMap.Marker({
        offset: new AMap.Pixel(12, -10),
        content: '<div class="markerInfo">北京南-->南京</div> ',
        position:datas[0].lnglat,
        map: map
      });
      var markers = []
      //移动过程中
      navg1.on('move', function (e) {
        navg1.marker.setPosition(navg1.getPosition());
        let idx = e.target.getCursor().idx //经过的原始点索引
        // console.log(e.target.getPosition());
        // console.log(e.target.getCursor());// 当前的原始数据点
        if (!datas[idx].address) {
          document.querySelector('#address').innerHTML = '无位置信息'
        } else {
          document.querySelector('#address').innerHTML = datas[idx].address
        }
        var marker = new AMap.Marker({
          position: datas[idx].lnglat,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: datas[idx].address
        });
        map.add(marker);
        markers.push(marker)
        map.setCenter(e.target.getPosition(), true) //跟随视角()
        // pathSimplifierIns.setFitView(this.getPathIndex()) //在视图里播放
        console.log(this.getPathIndex());
        console.log(idx);
        if (idx === datas.length - 1) {
          pathSimplifierIns.setFitView()
        }
      })
      function clearMarker() {
        if (markers) {
          for (let i = 0; i < markers.length; i++) {
            const item = markers[i];
            item.setMap(null);
            marker = null;
          }
        }
        markers = []
      }
    }
  </script>
</body>

</html>