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


 
<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 = `
          ${v.msg}
        
`;

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>