仿贝壳地图画圈找房功能实现（高德地图）

前言

在最近租房时，看到贝壳找房上线了一个地图画圈找房的功能，感觉很是新奇。接触地图开发也有很长一段时间了，以前大部分都是基于web pc端开发，所以一般遇到这种圈选，绘制多边形圆形都是直接基于官方API直接修改使用的，对于PC端鼠标操作来说，现有的交互用起来已经很不错了，但是对于H5移动端来说，只能通过手指触摸来模拟鼠标滑动，直接使用现有的API对于移动端交互体验来说并不是特别好。因此，看到了贝壳找房上这一新颖的功能，确实让我眼前一亮。话不多说，直接开搞，自己手动实现一个看看。有需要的小伙伴可以直接查看源码demo：https://gitee.com/fcli/map-edit.git

效果图如下：

实现思路

刚看到这个功能时，脑海里闪过一个想法，点成线、线成面。既然是线，那肯定是由一堆点组成的，那最终的圈选的面，也是由线包围起来的。然后一顿噼里啪啦操作，当我在PC端模拟的时候发现，并没有那么丝滑，这不经让我思考如此丝滑的滑动体验是怎么实现的，难道是通过画板canvas之类的，然后通过获取绘制的圈范围再和地图经纬度重合计算。事实证明，我完全想多了，当我把它放到H5上时，发现操作起来很丝滑，绘制的线段也是平滑的，这让我醍醐灌顶。一顿测试发现PC端监听 mouseMove事件并没有移动端的touchmove事件的触发的那么频繁，像是浏览器有节流之类的操作。

主要代码

地图初始化

首先，我使用vue3脚手架，所以在引入地图时与官方demo不太一样,通过createElement将地图API加载到页面上，并在地图加载完毕后再触发对应的地图操作。


onMounted(() => {//创建了一个回调函数,高德地图加载完毕会调用window.onload = () => {// 所有关于地图的逻辑全部都要写在这个回调里面// 保证高德地图加载完毕myMap.value = new AMap.Map('map', { resizeEnable: true, center: [121.429516, 31.151997], zoom: 13 });drawMap();};// key是申请的值let url = 'https://webapi.amap.com/maps?v=2.0&key=0cc611512938634634bac0969fdef3c1';//创建一个 script dom元素let jsapi = document.createElement('script');//设定script标签属性jsapi.src = url;//将API文件引入页面中,加载完毕以后会调用函数document.head.appendChild(jsapi);
})

监听绘开始制地图

当开始绘制地图时，先将地图固定，即：不可缩放、不可拖动… 同时将之前绘制的图层remove

myMap.value.on('touchstart', () => {myMap.value.setStatus({showIndoorMap: false,dragEnable: false,keyboardEnable: false,doubleClickZoom: false,zoomEnable: false,rotateEnable: false});if (lastPolyLine.value) {myMap.value.remove(lastPolyLine.value)}if (polygonAfterDraw.value) {myMap.value.remove(polygonAfterDraw.value)}lastPolyLine.value = null;polyPointArray.value = [];isMouseDown.value = true;});

监听绘制过程

当开始绘制时，监听touchmove事件，记录每次move触发的点并保存，通过这些点的集合绘制多边形，每次绘制多边形之前清除之前绘制的线段，在视觉上就能看到一条连续的线。

myMap.value.on('touchmove', (e: any) => {if (isMouseDown.value) {const point = [e.lnglat.lng, e.lnglat.lat]polyPointArray.value.push(point);if (lastPolyLine.value) {myMap.value.remove(lastPolyLine.value)}const polyline = new AMap.Polyline({path: polyPointArray.value, //多边形轮廓isOutline: true,strokeColor: "#3366FF",strokeOpacity: 1,strokeWeight: 2,// 折线样式还支持 'dashed'strokeStyle: "solid",// strokeStyle是dashed时有效strokeDasharray: [15, 5],lineJoin: 'round',lineCap: 'round',zIndex: 50,});myMap.value.add([polyline])lastPolyLine.value = polyline;}});

绘制结束

绘制结束，使用线段的点生成一个面的范围，通过这个范围就能获取到范围内的信息了，最后恢复地图正常状态。

document.addEventListener('touchend', () => {if (isMouseDown.value) {// 退出画线状态isMouseDown.value = false;// 添加多边形覆盖物,设置为禁止点击polygonAfterDraw.value = new AMap.Polygon({fillOpacity: 0.5,fillColor: '#7bccc4',strokeOpacity: 1,strokeColor: '#3366FF',strokeWeight: 4,strokeStyle: 'solid',strokeDasharray: [5, 5],//多边形数据path: polyPointArray.value //多边形轮廓});myMap.value.add(polygonAfterDraw.value);if (lastPolyLine.value) {myMap.value.remove(lastPolyLine.value)}myMap.value.setStatus({showIndoorMap: true,dragEnable: true,keyboardEnable: true,doubleClickZoom: true,zoomEnable: true,rotateEnable: true});}});