当前位置：首页 > VUE

用vue实现地图

2026-01-20 06:58:28VUE

Vue 实现地图的常用方法

使用高德地图 API

高德地图提供完善的 JavaScript API，适合国内项目。注册高德开放平台账号后获取 key。

安装依赖：

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.Scale', '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>

使用百度地图 API

百度地图同样需要申请密钥，通过 script 方式引入。

组件实现：

用vue实现地图

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

<script>
export default {
  mounted() {
    const script = document.createElement('script')
    script.src = `https://api.map.baidu.com/api?v=3.0&ak=你的百度密钥&callback=initMap`
    document.head.appendChild(script)
    window.initMap = () => {
      const map = new BMap.Map(this.$refs.mapContainer)
      const point = new BMap.Point(116.404, 39.915)
      map.centerAndZoom(point, 15)
      map.addControl(new BMap.NavigationControl())
    }
  }
}
</script>

使用 Leaflet.js

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

Mapbox 提供现代矢量地图，需要 access token。

安装依赖：

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 = '你的mapbox token'
    this.map = new mapboxgl.Map({
      container: this.$refs.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-74.5, 40],
      zoom: 9
    })
  }
}
</script>