当前位置：首页 > VUE

vue地图圆圈实现

2026-01-18 07:54:52VUE

vue地图圆圈实现

在Vue中实现地图圆圈功能，通常需要结合地图库如百度地图、高德地图或Leaflet等。以下是基于不同地图库的实现方法：

使用百度地图API

引入百度地图API 在index.html中引入百度地图JavaScript API：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的AK"></script>

创建地图组件 在Vue组件中初始化地图并添加圆圈：
```
<template>
<div id="map-container"></div>
</template>
```

export default { mounted() { this.initMap(); }, methods: { initMap() { const map = new BMap.Map("map-container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);

  const point = new BMap.Point(116.404, 39.915);
  const circle = new BMap.Circle(point, 500, {
    strokeColor: "blue",
    strokeWeight: 2,
    strokeOpacity: 0.8,
    fillColor: "#f03",
    fillOpacity: 0.3
  });
  map.addOverlay(circle);
}

} };

#map-container { width: 100%; height: 500px; } ```

使用高德地图API

引入高德地图API 在index.html中引入高德地图JavaScript API：

vue地图圆圈实现

<script src="https://webapi.amap.com/maps?v=2.0&key=您的KEY"></script>

创建地图组件


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

export default { mounted() { this.initMap(); }, methods: { initMap() { const map = new AMap.Map("map-container", { viewMode: "2D", zoom: 13, center: [116.397428, 39.90923] });

  const circle = new AMap.Circle({
    center: new AMap.LngLat(116.397428, 39.90923),
    radius: 500,
    strokeColor: "#FF33FF",
    strokeOpacity: 1,
    strokeWeight: 3,
    fillColor: "#1791fc",
    fillOpacity: 0.6
  });
  map.add(circle);
}

} };

```

使用Leaflet（开源库）

安装Leaflet
```
npm install leaflet
```

创建地图组件


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

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

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

  L.circle([39.90923, 116.397428], {
    color: "red",
    fillColor: "#f03",
    fillOpacity: 0.5,
    radius: 500
  }).addTo(map);
}

} };

```

动态调整圆圈半径

可以通过数据绑定实现动态半径调整：

<template>
  <div id="map-container"></div>
  <input type="range" v-model="radius" min="100" max="1000" />
</template>

<script>
export default {
  data() {
    return {
      radius: 500,
      circle: null
    };
  },
  watch: {
    radius(newVal) {
      if (this.circle) {
        this.circle.setRadius(newVal);
      }
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = new AMap.Map("map-container", {
        center: [116.397428, 39.90923],
        zoom: 13
      });

      this.circle = new AMap.Circle({
        center: new AMap.LngLat(116.397428, 39.90923),
        radius: this.radius,
        // 其他样式配置
      });
      map.add(this.circle);
    }
  }
};
</script>