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 leafletVue 组件实现：
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。
- 确保容器尺寸已正确设置，避免地图渲染异常。
- 移动端需考虑手势交互兼容性。
- 清除地图实例时注意销毁相关对象，避免内存泄漏。
