vue地图轨迹实现

Vue 中实现地图轨迹的方法

使用高德地图 API

高德地图提供了丰富的 JavaScript API，适合在 Vue 项目中集成轨迹功能。需要注册高德开发者账号并获取 API Key。

// 安装依赖
npm install @amap/amap-jsapi-loader --save

// Vue 组件中引入
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  data() {
    return {
      map: null,
      polyline: null,
      path: [
        [116.368904, 39.913423],
        [116.382122, 39.901176],
        [116.387271, 39.912501],
      ],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: 'YOUR_API_KEY',
        version: '2.0',
        plugins: ['AMap.Polyline'],
      }).then((AMap) => {
        this.map = new AMap.Map('map-container', {
          viewMode: '2D',
          zoom: 13,
          center: [116.397428, 39.90923],
        });

        this.polyline = new AMap.Polyline({
          path: this.path,
          strokeColor: '#3366FF',
          strokeWeight: 5,
          strokeStyle: 'solid',
        });

        this.map.add(this.polyline);
      });
    },
  },
};

使用百度地图 API

百度地图同样提供轨迹绘制功能，适合国内项目。

// 安装依赖
npm install vue-baidu-map --save

// main.js 中全局引入
import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap, {
  ak: 'YOUR_API_KEY',
});

// Vue 组件中使用
<template>
  <baidu-map class="map" :center="center" :zoom="zoom">
    <bm-polyline
      :path="path"
      stroke-color="blue"
      :stroke-opacity="0.5"
      :stroke-weight="6"
    ></bm-polyline>
  </baidu-map>
</template>

<script>
export default {
  data() {
    return {
      center: { lng: 116.404, lat: 39.915 },
      zoom: 15,
      path: [
        { lng: 116.404, lat: 39.915 },
        { lng: 116.414, lat: 39.925 },
        { lng: 116.424, lat: 39.935 },
      ],
    };
  },
};
</script>

使用 Leaflet 实现轨迹

Leaflet 是一个轻量级的开源地图库，适合需要高度自定义的项目。

// 安装依赖
npm install leaflet vue2-leaflet --save

// Vue 组件中使用
<template>
  <div id="map"></div>
</template>

<script>
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

export default {
  data() {
    return {
      map: null,
      polyline: null,
      path: [
        [39.913423, 116.368904],
        [39.901176, 116.382122],
        [39.912501, 116.387271],
      ],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = L.map('map').setView([39.913423, 116.368904], 13);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);

      this.polyline = L.polyline(this.path, {
        color: 'red',
        weight: 5,
        opacity: 0.7,
      }).addTo(this.map);
    },
  },
};
</script>

轨迹动画效果

为轨迹添加动画效果可以提升用户体验，高德地图提供了移动轨迹动画功能。

// 高德地图轨迹动画
const marker = new AMap.Marker({
  map: this.map,
  position: this.path[0],
  icon: 'https://webapi.amap.com/images/car.png',
  offset: new AMap.Pixel(-13, -26),
});

marker.moveAlong(this.path, 500, (k) => {
  return k;
});

实时轨迹更新

对于需要实时更新的轨迹，可以使用 WebSocket 或定时器动态更新路径数据。

// 实时更新轨迹示例
setInterval(() => {
  const newPoint = [116.368904 + Math.random() * 0.01, 39.913423 + Math.random() * 0.01];
  this.path.push(newPoint);
  this.polyline.setPath(this.path);
}, 1000);

轨迹样式自定义

可以根据需求自定义轨迹的样式，如颜色、宽度、虚线等。

// 高德地图自定义样式
this.polyline = new AMap.Polyline({
  path: this.path,
  strokeColor: '#FF33FF', // 紫色
  strokeWeight: 8,
  strokeStyle: 'dashed', // 虚线
  strokeDasharray: [10, 5], // 虚线样式
});

以上方法可以根据项目需求选择合适的方案实现 Vue 中的地图轨迹功能。