vue实现地图轨迹

Vue 实现地图轨迹的方法

使用高德地图 API

高德地图提供了 JavaScript API，适合在 Vue 项目中集成。需要先申请高德地图的 Key，并在项目中引入高德地图的 SDK。

安装依赖：

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],
        [116.398258, 39.904600]
      ]
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: '你的高德地图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.drawPolyline();
      }).catch(e => {
        console.error(e);
      });
    },
    drawPolyline() {
      this.polyline = new AMap.Polyline({
        path: this.path,
        strokeColor: '#3366FF',
        strokeWeight: 5,
        strokeStyle: 'solid'
      });
      this.map.add(this.polyline);
    }
  }
};

模板部分：

<div id="map-container" style="width: 100%; height: 400px;"></div>

使用百度地图 API

百度地图也提供了类似的 JavaScript API，适合在 Vue 项目中使用。需要申请百度地图的 AK。

在 public/index.html 中引入百度地图 SDK：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的百度地图AK"></script>

在 Vue 组件中使用百度地图：

export default {
  data() {
    return {
      map: null,
      polyline: null,
      path: [
        {lng: 116.404, lat: 39.915},
        {lng: 116.414, lat: 39.925},
        {lng: 116.424, lat: 39.935}
      ]
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new BMap.Map('map-container');
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
      this.drawPolyline();
    },
    drawPolyline() {
      const points = this.path.map(item => new BMap.Point(item.lng, item.lat));
      this.polyline = new BMap.Polyline(points, {
        strokeColor: 'blue',
        strokeWeight: 2,
        strokeOpacity: 0.5
      });
      this.map.addOverlay(this.polyline);
    }
  }
};

模板部分：

<div id="map-container" style="width: 100%; height: 400px;"></div>

使用 Leaflet

Leaflet 是一个轻量级的地图库，适合在 Vue 项目中使用。需要安装 Leaflet 和 Vue2Leaflet。

安装依赖：

npm install leaflet vue2-leaflet --save

在 Vue 组件中使用 Leaflet：

import { LMap, LPolyline, LTileLayer } from 'vue2-leaflet';

export default {
  components: {
    LMap,
    LPolyline,
    LTileLayer
  },
  data() {
    return {
      zoom: 13,
      center: [39.90923, 116.397428],
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      path: [
        [39.913423, 116.368904],
        [39.901176, 116.382122],
        [39.912501, 116.387271],
        [39.904600, 116.398258]
      ]
    };
  }
};

模板部分：

<l-map :zoom="zoom" :center="center" style="height: 400px">
  <l-tile-layer :url="url"></l-tile-layer>
  <l-polyline :lat-lngs="path" color="red"></l-polyline>
</l-map>

使用 Google Maps API

Google Maps 提供了强大的地图功能，适合在 Vue 项目中使用。需要申请 Google Maps 的 API Key。

安装依赖：

npm install @googlemaps/js-api-loader --save

在 Vue 组件中使用 Google Maps：

import { Loader } from '@googlemaps/js-api-loader';

export default {
  data() {
    return {
      map: null,
      path = [
        { lat: 39.913423, lng: 116.368904 },
        { lat: 39.901176, lng: 116.382122 },
        { lat: 39.912501, lng: 116.387271 },
        { lat: 39.904600, lng: 116.398258 }
      ]
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const loader = new Loader({
        apiKey: '你的Google Maps API Key',
        version: 'weekly'
      });
      loader.load().then(() => {
        this.map = new google.maps.Map(document.getElementById('map-container'), {
          center: { lat: 39.90923, lng: 116.397428 },
          zoom: 13
        });
        this.drawPolyline();
      });
    },
    drawPolyline() {
      new google.maps.Polyline({
        path: this.path,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map: this.map
      });
    }
  }
};

模板部分：

<div id="map-container" style="width: 100%; height: 400px;"></div>

以上方法均可在 Vue 项目中实现地图轨迹功能，根据项目需求选择合适的地图服务商和库。