vue地图圆圈实现

使用 Vue 和第三方地图库实现圆圈

Vue 结合地图库（如高德、百度或 Leaflet）可以轻松实现地图圆圈功能。以下是基于高德地图的实现示例。

安装高德地图 SDK：

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

在 Vue 组件中引入并初始化地图：

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', {
          zoom: 13,
          center: [116.397428, 39.90923]
        });
        this.addCircle(AMap);
      });
    },
    addCircle(AMap) {
      this.circle = new AMap.Circle({
        center: [116.397428, 39.90923],
        radius: 1000,
        fillColor: '#FF0000',
        fillOpacity: 0.5,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2
      });
      this.map.add(this.circle);
    }
  }
};

模板部分：

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

使用 Leaflet 实现圆圈

Leaflet 是一个轻量级的地图库，适合移动端和简单应用。

安装 Leaflet：

npm install leaflet

Vue 组件实现：

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = L.map('map-container').setView([51.505, -0.09], 13);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

      const circle = L.circle([51.508, -0.11], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 500
      }).addTo(map);
    }
  }
};

动态更新圆圈属性

可以通过数据绑定动态更新圆圈的半径或位置：

watch: {
  radius(newVal) {
    if (this.circle) {
      this.circle.setRadius(newVal);
    }
  }
}

注意事项

• 地图库需要申请对应的开发者 Key。
• 确保容器尺寸已正确设置，避免地图渲染异常。
• 移动端需考虑手势交互兼容性。
• 清除地图实例时注意销毁相关对象，避免内存泄漏。