- A+
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
仿贝壳地图画圈找房功能实现(高德地图)
前言
在最近租房时,看到贝壳找房上线了一个地图画圈找房的功能,感觉很是新奇。接触地图开发也有很长一段时间了,以前大部分都是基于web pc端开发,所以一般遇到这种圈选,绘制多边形圆形都是直接基于官方API直接修改使用的,对于PC端鼠标操作来说,现有的交互用起来已经很不错了,但是对于H5移动端来说,只能通过手指触摸来模拟鼠标滑动,直接使用现有的API对于移动端交互体验来说并不是特别好。因此,看到了贝壳找房上这一新颖的功能,确实让我眼前一亮。话不多说,直接开搞,自己手动实现一个看看。有需要的小伙伴可以直接查看源码demo:gitee.com/fcli/map-ed…
效果图如下:
实现思路
刚看到这个功能时,脑海里闪过一个想法,点成线、线成面。既然是线,那肯定是由一堆点组成的,那最终的圈选的面,也是由线包围起来的。然后一顿噼里啪啦操作,当我在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 }); } });