当前位置：首页 > VUE

vue实现map

2026-03-06 21:51:37VUE

Vue 中实现 Map 功能

在 Vue 中实现地图功能通常需要结合第三方地图库（如高德地图、百度地图或 Google Maps）。以下是几种常见方法：

使用高德地图

安装高德地图 SDK：

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

在 Vue 组件中引入并使用：

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

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    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: 400px;
}
</style>

使用百度地图

安装百度地图 SDK：

npm install vue-baidu-map --save

全局注册或在组件中使用：

<template>
  <baidu-map
    :center="center"
    :zoom="zoom"
    style="width: 100%; height: 400px"
  ></baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map'

export default {
  components: {
    BaiduMap
  },
  data() {
    return {
      center: { lng: 116.404, lat: 39.915 },
      zoom: 15
    }
  }
}
</script>

使用 Google Maps

安装 Google Maps SDK：

npm install @googlemaps/js-api-loader

在组件中使用：

vue实现map

<template>
  <div ref="mapRef" style="width: 100%; height: 400px"></div>
</template>

<script>
import { Loader } from '@googlemaps/js-api-loader'

export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    const loader = new Loader({
      apiKey: '你的Google Maps Key',
      version: 'weekly'
    })

    loader.load().then(() => {
      this.map = new google.maps.Map(this.$refs.mapRef, {
        center: { lat: 39.90923, lng: 116.397428 },
        zoom: 8
      })
    })
  }
}
</script>

常见功能实现

添加标记

// 高德地图示例
const marker = new AMap.Marker({
  position: [116.397428, 39.90923],
  map: this.map
})

添加信息窗口

// 百度地图示例
const infoWindow = new BMap.InfoWindow('内容')
this.map.openInfoWindow(infoWindow, this.center)

绘制路径

// Google Maps示例
const path = new google.maps.Polyline({
  path: [
    { lat: 39.9, lng: 116.4 },
    { lat: 39.91, lng: 116.41 }
  ],
  map: this.map
})