高德地图实现gps轨迹坐标定位代码

 

<template>
  <div class="index">
    <div id="amapContainer"></div>
  </div>
</template>

<script>
import {pxToRem} from '@/utils/rem.js';
const pathList = [
  {
    path: [120.99152, 27.937717],
    msg: '2023-12-14 14:21:43'
  },
  {
    path: [120.99152, 27.937717],
    msg: '2023-12-14 14:21:43'
  },
  {
    path: [120.99152, 27.937717],
    msg: '2023-12-14 14:21:43'
  },
  {
    path: [120.99152, 27.937717],
    msg: '2023-12-14 14:21:43'
  },
  {
    path: [119.654841, 26.345312],
    msg: '2023-12-14 14:21:43'
  },
  {
    path: [119.604823, 26.146219],
    msg: '2023-12-14 14:21:43'
  },
  {
    path: [119.608848, 25.888029],
    msg: '2023-12-14 14:21:43'
  },
  {
    path: [119.604823, 25.719924],
    msg: '2023-12-14 14:21:43'
  },
  {
    path: [119.700834, 25.637084],
    msg: '2023-12-14 14:21:43'
  },
  {
    path: [119.750277, 25.506716],
    msg: '2023-12-14 14:21:43'
  },
  {
    path: [120.07108, 25.189062],
    msg: '2023-12-14 14:21:43'
  },
  {
    path: [120.374635, 24.832797],
    msg: '2023-12-14 14:21:43'
  },
  {
    path: [120.627598, 24.087605],
    msg: '2023-12-14 14:21:43'
  },
  {
    path: [120.406831, 22.596914],
    msg: '2023-12-14 14:21:43'
  },
  {
    path: [120.866763, 22.267658],
    msg: '2023-12-14 14:21:43'
  }
];
export default {
  name: 'amapFence',
  data () {
    return {
      pxToRem,
      path: [], // 当前绘制的多边形经纬度数组
      polygonItem: [], // 地图上绘制的所有多边形对象
      polyEditors: []  // 所有编辑对象数组
    };
  },
  props: {
    paths: {} // 编辑
  },
  mounted () {
    this.intAmap(() => {});
  },
  methods: {
    // 绘制路线，
    drawPath (path) {
      const polyline1 = new AMap.Polyline({
        path,          // 设置线覆盖物路径
        showDir: true,
        strokeColor: '#58aaff',   // 线颜色
        strokeWeight: 5           // 线宽
      }); 
      this.map.add([polyline1]);
    },
    // 绘制圆点
    createMaker (path = []) {
      console.log(path, 'path--');
      path.forEach((v, idx) => {
        // 点标记显示内容，HTML要素字符串
        const markerContent = `<div class="amap-maker-icon">
          <div class="title">${v.msg}</div>
        </div>`;
        const position = new this.AMap.LngLat(v.path[0], v.path[1]);
        const marker = new this.AMap.Marker({
          position: position,
          // 将 html 传给 content
          content: markerContent,
          // 以 icon 的 [center bottom] 为原点
          offset: new this.AMap.Pixel(-5, -5)
        });

        // 将 markers 添加到地图
        this.map.add(marker);
      });
      setTimeout(_ => {
        const list = document.querySelectorAll('.amap-maker-icon');
        console.log(list, 'list');
        for (let i = 0; i < list.length; i++) {
          list[i].onclick = function () {
            alert('点击了');
            console.log(list[i], 'list[i]点击的点');
          };
        }
      }, 4000);
    },
    // 地图初始化
    intAmap (callBack) {
      this.AMap = window.AMap;
      this.AMap.plugin(['AMap.MouseTool', 'AMap.PolyEditor', 'AMap.ControlBar'], function () {
        //TODO  创建控件并添加
      });
      const len = Math.ceil(pathList.length / 2); // 数组中间那个数据
      const center = [pathList[len].path[0], pathList[len].path[1]];

      this.map = new this.AMap.Map("amapContainer", {
        center,
        zoom: 6,
        pitch: 80,
        layers: [new AMap.TileLayer.Satellite()],
        viewMode: '2D',//开启3D视图,默认为关闭
        buildingAnimation: true,//楼块出现是否带动画
      });
      const setFeatures = ['bg', 'road', 'building', 'point'];
      map.setFeatures(setFeatures); // 多个种类要素显示

      this.map.addControl(new this.AMap.ControlBar());
      if (callBack && typeof callBack == 'function') {
        callBack();
        this.drawPath(pathList.map(v => v.path));
        this.createMaker(pathList);
      }
    },
  }
};
</script>

<style lang="scss" scoped>
::v-deep#amapContainer {
  height: 800px;
  width: 100%;
  .amap-maker-icon {
    position: relative;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    background: red;
    &:hover {
      .title {
        display: block;
      }
    }
    .title {
      // display: none;
      position: absolute;
      top: -20px;
      left: -70px;
      width: 150px;
      color: #333;
      font-size: 10px;
      border-radius: 5px;
      background: rgba(256, 256, 256)
    }
  }
}
</style>