当前位置：首页 > VUE

vue实现地图导航

2026-02-23 23:06:47VUE

vue实现地图导航的方法

在Vue项目中实现地图导航功能，可以借助第三方地图API如高德地图、百度地图或腾讯地图。以下是基于高德地图的实现方案。

安装高德地图SDK

在项目中引入高德地图JavaScript API。可以通过npm安装或直接通过script标签引入。

vue实现地图导航

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

初始化地图

在Vue组件中初始化地图，需要先加载高德地图API。

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.Driving'],
      }).then((AMap) => {
        this.map = new AMap.Map('map-container', {
          viewMode: '2D',
          zoom: 13,
          center: [116.397428, 39.90923],
        });
      }).catch(e => {
        console.error(e);
      });
    },
  },
};

添加导航功能

使用高德地图的Driving插件实现路径规划和导航。

vue实现地图导航

methods: {
  initMap() {
    AMapLoader.load({
      key: '你的高德地图Key',
      version: '2.0',
      plugins: ['AMap.Driving'],
    }).then((AMap) => {
      this.map = new AMap.Map('map-container', {
        viewMode: '2D',
        zoom: 13,
        center: [116.397428, 39.90923],
      });

      const driving = new AMap.Driving({
        map: this.map,
        panel: 'panel',
      });

      driving.search(
        { keyword: '北京市海淀区中关村' },
        { keyword: '北京市朝阳区望京' },
        (status, result) => {
          if (status === 'complete') {
            console.log('路线规划完成');
          } else {
            console.error('路线规划失败:', result);
          }
        }
      );
    }).catch(e => {
      console.error(e);
    });
  },
},

显示导航面板

在模板中添加地图容器和导航信息面板。

<template>
  <div>
    <div id="map-container" style="width: 100%; height: 500px;"></div>
    <div id="panel" style="width: 100%; height: 200px; overflow: auto;"></div>
  </div>
</template>