当前位置：首页 > VUE

vue实现地图分布

2026-02-25 06:14:12VUE

Vue 实现地图分布的方法

使用高德地图 API

在 Vue 项目中引入高德地图 API，通过官方提供的 JavaScript SDK 实现地图展示和标记分布。

安装依赖：

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,
      markers: []
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: '你的高德地图Key',
        version: '2.0',
        plugins: ['AMap.Marker']
      }).then((AMap) => {
        this.map = new AMap.Map('map-container', {
          viewMode: '2D',
          zoom: 11,
          center: [116.397428, 39.90923]
        });

        // 添加标记点
        this.addMarkers(AMap);
      });
    },
    addMarkers(AMap) {
      const points = [
        { lnglat: [116.397428, 39.90923], name: '地点1' },
        { lnglat: [116.387428, 39.91923], name: '地点2' }
      ];

      points.forEach(point => {
        const marker = new AMap.Marker({
          position: point.lnglat,
          title: point.name
        });
        this.map.add(marker);
        this.markers.push(marker);
      });
    }
  }
};
</script>

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

使用百度地图 API

通过百度地图 JavaScript API 实现类似功能。

安装依赖：

npm install vue-baidu-map --save

示例代码：

<template>
  <baidu-map class="map" :center="center" :zoom="zoom">
    <bm-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :title="marker.title"></bm-marker>
  </baidu-map>
</template>

<script>
import { BaiduMap, BmMarker } from 'vue-baidu-map';

export default {
  components: {
    BaiduMap,
    BmMarker
  },
  data() {
    return {
      center: { lng: 116.404, lat: 39.915 },
      zoom: 15,
      markers: [
        { position: { lng: 116.404, lat: 39.915 }, title: '位置1' },
        { position: { lng: 116.414, lat: 39.925 }, title: '位置2' }
      ]
    };
  }
};
</script>

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

使用 ECharts 地图

通过 ECharts 的地理坐标系实现数据可视化地图分布。

安装依赖：

npm install echarts --save

示例代码：

<template>
  <div id="echarts-map" style="width: 100%; height: 500px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts/map/js/china';

export default {
  mounted() {
    this.initEchartsMap();
  },
  methods: {
    initEchartsMap() {
      const chart = echarts.init(document.getElementById('echarts-map'));
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },
        series: [{
          name: '分布',
          type: 'map',
          map: 'china',
          data: [
            { name: '北京', value: 100 },
            { name: '上海', value: 80 }
          ],
          label: {
            show: true
          }
        }]
      };
      chart.setOption(option);
    }
  }
};
</script>

使用 Leaflet 地图库

Leaflet 是一个轻量级的开源地图库，适合在 Vue 项目中使用。

安装依赖：

npm install leaflet --save

示例代码：

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

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

export default {
  mounted() {
    this.initLeafletMap();
  },
  methods: {
    initLeafletMap() {
      const map = L.map('leaflet-map').setView([39.90923, 116.397428], 13);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
      }).addTo(map);

      const marker = L.marker([39.90923, 116.397428]).addTo(map)
        .bindPopup('位置信息');
    }
  }
};
</script>

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