vue实现导航地图

Vue 实现导航地图的方法

使用高德地图 API

高德地图提供了完善的 JavaScript API，适合在 Vue 项目中集成。

安装高德地图 JavaScript API 的依赖：

npm install @amap/amap-jsapi-loader --save

在 Vue 组件中引入并使用：

import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: '你的高德地图Key',
        version: '2.0',
        plugins: ['AMap.Geolocation', 'AMap.Driving'],
      })
        .then((AMap) => {
          this.map = new AMap.Map('container', {
            viewMode: '2D',
            zoom: 11,
            center: [116.397428, 39.90923],
          });
          this.addGeolocation(AMap);
        })
        .catch((e) => {
          console.error(e);
        });
    },
    addGeolocation(AMap) {
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,
        timeout: 10000,
      });
      this.map.addControl(geolocation);
      geolocation.getCurrentPosition((status, result) => {
        if (status === 'complete') {
          console.log('定位成功', result);
        } else {
          console.error('定位失败', result);
        }
      });
    },
  },
};

使用百度地图 API

百度地图也提供了适用于 Vue 的 SDK。

引入百度地图 JavaScript API：

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

在 Vue 组件中使用：

export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = new BMap.Map('container');
      const point = new BMap.Point(116.404, 39.915);
      map.centerAndZoom(point, 15);
      map.enableScrollWheelZoom();

      const geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition((r) => {
        if (this.getStatus() === BMAP_STATUS_SUCCESS) {
          const mk = new BMap.Marker(r.point);
          map.addOverlay(mk);
          map.panTo(r.point);
        }
      });
    },
  },
};

使用 Leaflet

Leaflet 是一个轻量级的开源地图库，适合简单的导航需求。

安装 Leaflet：

npm install leaflet

在 Vue 组件中使用：

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = L.map('container').setView([51.505, -0.09], 13);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors',
      }).addTo(map);

      L.Routing.control({
        waypoints: [
          L.latLng(51.5, -0.09),
          L.latLng(51.51, -0.1),
        ],
        routeWhileDragging: true,
      }).addTo(map);
    },
  },
};

使用 Google Maps API

Google Maps 提供了强大的导航功能。

安装 Google Maps JavaScript API：

npm install @googlemaps/js-api-loader

在 Vue 组件中使用：

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

export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const loader = new Loader({
        apiKey: '你的Google Maps Key',
        version: 'weekly',
        libraries: ['places', 'directions'],
      });

      loader.load().then((google) => {
        this.map = new google.maps.Map(document.getElementById('container'), {
          center: { lat: -34.397, lng: 150.644 },
          zoom: 8,
        });

        const directionsService = new google.maps.DirectionsService();
        const directionsRenderer = new google.maps.DirectionsRenderer();
        directionsRenderer.setMap(this.map);

        const request = {
          origin: 'Chicago, IL',
          destination: 'Los Angeles, CA',
          travelMode: 'DRIVING',
        };

        directionsService.route(request, (result, status) => {
          if (status === 'OK') {
            directionsRenderer.setDirections(result);
          }
        });
      });
    },
  },
};

注意事项

• 在使用地图 API 时，需要申请对应的开发者 Key。
• 根据项目需求选择合适的地图服务提供商。
• 注意地图 API 的调用频率限制和费用问题。
• 在移动端使用时，确保适配不同的屏幕尺寸和交互方式。