uniapp圆形电子围栏制作

使用 UniApp 和 百度地图 API 实现圆形电子围栏
在 UniApp 中实现圆形电子围栏功能涉及多个方面的工作，包括初始化地图组件、创建圆形单位以及处理用户交互逻辑。下面提供了一个详细的指南和示例代码来帮助理解这一过程。
初始化百度地图插件
为了能够在项目里调用百度地图的相关接口，在manifest.json文件中的module节点下配置好对应的百度地图模块，并申请相应的key[^2]。
{
"usingComponents": {},
"appid": "",
"projectname": "your_project_name",
...
"modules": {
"baiduMap": {
"apiKey": "Your_Baidu_API_Key"
}
},
...
}
登录后复制
创建页面结构与样式
设计一个简单的HTML布局用于展示地图区域和其他控件。这里假设已经引入了必要的CSS框架来进行美化工作[^1]。
<template>
<view class="container">
<!-- 地图容器 -->
<map id="myMap" style="width: 100%; height: 80vh;"></map>

<!-- 控制按钮组 -->
<button @click="addCircle">添加圆形围栏</button>
<button @click="removeCircle">移除当前圆形围栏</button>

<!-- 更多功能可自行扩展... -->
</view>
</template>
登录后复制
编写 JavaScript 方法
接下来就是核心部分——编写JavaScript方法完成实际的功能开发：

加载地图实例
需要先通过uni.createMapContext()函数获取到地图上下文对象以便后续操作。

定义全局变量
定义一些全局性的变量用来保存绘制好的图形对象及其编辑器状态等信息[^3]。

添加/删除圆形围栏的方法
当点击对应按钮时触发相应动作，比如新增或清除现有的圆形边界。

<script>
export default {
data () {
return {
mapCtx: null, // 地图上下文
circle: null, // 存储圆形围栏的对象
editor: null, // 圆形编辑工具
centerPoint: {lng: 116.404, lat: 39.915}, // 默认中心点坐标
radius: 1000 // 半径大小(单位米)
};
},

onLoad(){
this.mapCtx = uni.createMapContext('myMap',this.$scope);
},

methods:{
addCircle(){
const options={
center:this.centerPoint,
radius:this.radius,
fillColor:'#FFCC00',
strokeColor:'#FF0000'
};

if(!this.circle){
this.circle=new BMap.Circle(this.centerPoint,this.radius,options);
this.editor = new BMapLib.CircleEditor(this.mapCtx.getBMap(), this.circle);

this.editor.enable(); // 启用编辑模式

this.mapCtx.addOverlay(this.circle); // 将圆形添加至地图显示层面上
}else{
console.log("已有存在的圆形围栏");
}
},

removeCircle(){
if (this.circle) {
this.editor.disable();
this.mapCtx.removeOverlay(this.circle);
this.circle=null;
this.editor=null;
}
}
}
};
</script>
登录后复制
以上即是在UniApp环境中利用百度地图API构建基本的圆形电子围栏特性的完整流程介绍及样例代码片段。