# 一、引入百度地图JavaScript API v3.0 通过uniapp中的renderjs动态创建script标签，将标签动态添加到页面中，从而实现百度地图API的引入，代码如下。（不知道uniapp中的renderjs可以查看[uniapp官网renderjs介绍](https://uniapp.dcloud.net.cn/tutorial/renderjs.html#renderjs)） ```js ``` 实现的点聚合效果如下图 ![屏幕录制2023-04-06 17.28.38.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/86d7ba69150c425bbee42c30992c9385~tplv-k3u1fbpfcp-watermark.image?) # 三、百度地图-区域绘制百度地图封装好的区域绘制工具包在PC上可以用，在手机上用不了，看工具包源码，发现监听的是鼠标的事件方法，没有监听手指的，后来改用了touch事件也用不了索性就自己封装了一个绘制区域的工具类，代码如下 ```js export default class{ map=null // 地图实例 drawingChart // 当前绘制的区域实例 drawChartList = [] // 绘制的所有区域实例数据 _areaChange=()=>{} constructor(map){ // 构造函数传入地图实例 this.map = map this.getNum=this.getNum() } getNum(){ let num = 1; return ()=>num++ } initEvent(){ // 注册手指点击、移动、抬起事件方法 this.map.addEventListener("touchstart",this.touchstart) this.map.addEventListener("touchmove",this.touchmove) this.map.addEventListener("touchend",this.touchend) } removeEvent(){ // 移除手指点击、移动、抬起事件方法 this.map.removeEventListener("touchstart",this.touchstart) this.map.removeEventListener("touchmove",this.touchmove) this.map.removeEventListener("touchend",this.touchend) } onChange(callBack=()=>{}){ // 通过回调函数获取每次绘制后所有绘制区域的最新数据 this._areaChange = callBack } setArea({start,end}){ // 在地图上添加区域 let polygon = this.drawRect(this.getRectPoint(start,end)) this.addArea(polygon) this.map.addOverlay(polygon); //增加区域 } getRectPoint(s,e){ // 通过起点和终点计算出长方形的四个角的位置 return [ new BMap.Point(s.lng,s.lat), new BMap.Point(e.lng,s.lat), new BMap.Point(e.lng,e.lat), new BMap.Point(s.lng,e.lat), ] } drawRect(points){ // 绘制区域 let polygon= new BMap.Polygon(points,{ strokeColor:"red", //边线颜色。 fillColor:"transparent", //填充颜色。当参数为空时，圆形将没有填充效果。 strokeWeight: 2, //边线的宽度，以像素为单位。 strokeOpacity: 1, //边线透明度，取值范围0 - 1。 strokeStyle: 'solid' ,//边线的样式，solid或dashed。 }) return polygon } touchstart=({point})=>{ console.log('开始移动',point); let polygon = this.drawRect(this.getRectPoint(point,point)) this.map.addOverlay(polygon); //增加多边形 this.drawingChart = polygon } touchmove=({point})=>{ console.log('移动中'); let chart = this.drawingChart let path = chart.getPath() let startPoint = path[0] chart.setPath(this.getRectPoint(startPoint,point)) this.map.setCenter(this.map.getCenter()) } touchend=({point})=>{ console.log('结束移动'); this.addArea(this.drawingChart) this._areaChange(this.drawChartList) this.drawingChart = null this.close() } addArea(area){ let path = area.getPath() let sartPoint = path[0] let point = path[2] let lng = sartPoint.lng+(point.lng-sartPoint.lng)/2 let lat = sartPoint.lat+(point.lat-sartPoint.lat)/2 let index = this.getNum() let label = new BMap.Label(`区域${index}`,{ position:new BMap.Point(lng,lat), offset:new BMap.Size(-18,-10) }) label.setStyle({ backgroundColor:'transparent', color:"red", border:0, fontSize:'16px', }) this.map.addOverlay(label); this.drawChartList.push({ area:area, label, id:index, }) } open(){ // 开启绘制区域功能 this.map.disableDragging() // 关闭地图拖动 this.initEvent() } close(){ // 关闭区域绘制功能 this.map.enableDragging() // 开启地图拖动 this.removeEvent() } } ``` 最终实现区域绘制效果如下图： ![屏幕录制2023-04-06 17.22.50.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/137d8bf593d7466ba123e26f40462650~tplv-k3u1fbpfcp-watermark.image?)