当前位置：首页 > VUE

用vue实现地图

2026-02-20 23:00:49VUE

使用Vue实现地图的几种方法

基于高德地图API

安装高德地图JavaScript API库：

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', 'AMap.Scale']
      }).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

安装百度地图JavaScript API：

npm install vue-baidu-map --save

全局注册组件：

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: '您的百度key'
})

在组件中使用：

<template>
  <baidu-map class="map" :center="center" :zoom="zoom"></baidu-map>
</template>

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

<style>
.map {
  width: 100%;
  height: 500px;
}
</style>

使用Leaflet地图库

安装Leaflet及相关插件：

npm install leaflet vue2-leaflet

创建地图组件：

<template>
  <div>
    <l-map :zoom="zoom" :center="center">
      <l-tile-layer :url="url"></l-tile-layer>
      <l-marker :lat-lng="marker"></l-marker>
    </l-map>
  </div>
</template>

<script>
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet'

export default {
  components: {
    LMap,
    LTileLayer,
    LMarker
  },
  data() {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      zoom: 13,
      center: [51.505, -0.09],
      marker: [51.505, -0.09]
    }
  }
}
</script>

<style>
@import "~leaflet/dist/leaflet.css";

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

使用Google Maps API

安装Google Maps JavaScript API：

npm install @googlemaps/js-api-loader

创建地图组件：

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

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

export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    async initMap() {
      const loader = new Loader({
        apiKey: "您的Google key",
        version: "weekly"
      })

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

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

地图功能扩展建议

添加标记点

// 高德地图示例
new AMap.Marker({
  position: [116.39, 39.9],
  map: this.map
})

绘制多边形

// 百度地图示例
const polygon = new BMap.Polygon([
  new BMap.Point(116.387, 39.919),
  new BMap.Point(116.385, 39.913),
  new BMap.Point(116.394, 39.911)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5})
this.map.addOverlay(polygon)

添加信息窗口

// Leaflet示例
L.popup()
  .setLatLng([51.5, -0.09])
  .setContent("这里是信息窗口内容")
  .openOn(this.map)

实现地图搜索

用vue实现地图

// 高德地图搜索示例
AMap.plugin('AMap.PlaceSearch', () => {
  const placeSearch = new AMap.PlaceSearch({
    pageSize: 5,
    pageIndex: 1,
    city: '北京'
  })
  placeSearch.search('餐馆', (status, result) => {
    // 处理搜索结果
  })
})