当前位置：首页 > VUE

vue地图圆圈实现

2026-02-19 00:16:51VUE

Vue 中实现地图圆圈的方法

在 Vue 中实现地图圆圈通常需要结合地图库，如百度地图、高德地图或 Leaflet。以下是几种常见的方法：

使用高德地图（AMap）实现圆圈

安装高德地图 JavaScript API：

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

        this.circle = new AMap.Circle({
          center: [116.397428, 39.90923],
          radius: 1000, // 半径，单位：米
          strokeColor: '#FF33FF',
          strokeOpacity: 1,
          strokeWeight: 3,
          fillColor: '#1791fc',
          fillOpacity: 0.6,
        });

        this.map.add(this.circle);
      });
    },
  },
};
</script>

使用百度地图实现圆圈

安装百度地图 JavaScript API：

npm install vue-baidu-map --save

在 Vue 组件中使用：

<template>
  <baidu-map class="map" :center="center" :zoom="zoom">
    <bm-circle :center="circleCenter" :radius="radius" stroke-color="blue" stroke-weight="2" stroke-opacity="0.5" fill-color="red" fill-opacity="0.5"></bm-circle>
  </baidu-map>
</template>

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

使用 Leaflet 实现圆圈

安装 Leaflet：

npm install leaflet

在 Vue 组件中使用：

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

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

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

      L.circle([39.90923, 116.397428], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 1000,
      }).addTo(map);
    },
  },
};
</script>

<style>
#map {
  height: 400px;
  width: 100%;
}
</style>

动态调整圆圈属性

圆圈的位置、半径和样式可以通过数据绑定动态调整。例如，在高德地图中：

// 更新圆圈半径
this.circle.setRadius(2000);

// 更新圆圈中心点
this.circle.setCenter([116.39, 39.9]);

// 更新圆圈样式
this.circle.setOptions({
  fillColor: '#00FF00',
  strokeColor: '#0000FF',
});