当前位置：首页 > VUE

vue实现地图

2026-03-10 11:31:30VUE

Vue 实现地图的常用方法

使用高德地图（AMap）

高德地图提供 Vue 组件库，适合国内项目。安装依赖：

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

初始化地图组件：

<template>
  <div id="map-container"></div>
</template>

<script>
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.ToolBar']
      }).then((AMap) => {
        this.map = new AMap.Map('map-container', {
          viewMode: '2D',
          zoom: 11,
          center: [116.397428, 39.90923]
        });
      });
    }
  }
};
</script>

<style>
#map-container {
  width: 100%;
  height: 500px;
}
</style>

使用百度地图

百度地图需要引入脚本并初始化：

vue实现地图

<template>
  <div id="bmap-container"></div>
</template>

<script>
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = `https://api.map.baidu.com/api?v=3.0&ak=您的百度Key&callback=initBMap`;
    document.head.appendChild(script);
    window.initBMap = () => {
      const map = new BMap.Map('bmap-container');
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
      map.addControl(new BMap.NavigationControl());
    };
  }
};
</script>

使用Leaflet（开源方案）

适合需要轻量级地图的国际化项目：

npm install leaflet

基础实现：

vue实现地图

<template>
  <div id="leaflet-map"></div>
</template>

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

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

使用Mapbox GL

适合需要3D地形或高级样式的场景：

npm install mapbox-gl

基础示例：

<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

<script>
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

export default {
  data() {
    return {
      map: null
    };
  },
  mounted() {
    mapboxgl.accessToken = '您的Token';
    this.map = new mapboxgl.Map({
      container: this.$refs.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-74.5, 40],
      zoom: 9
    });
  },
  beforeDestroy() {
    this.map?.remove();
  }
};
</script>