腾讯地图开发踩坑

wss_BinAdam

已于 2022-07-28 11:47:48 修改

阅读量2.2k

点赞数

文章标签： javascript 前端开发语言

于 2021-02-23 18:08:59 首次发布

本文链接：https://blog.csdn.net/weixin_43734043/article/details/113495237

版权

最近开发一个地产资讯类型项目，需要做一个地图找房，负责地图的前端跑路了，怎么办？只能上手干了- -

选型使用腾讯地图，因为项目的主打小程序关系，主要用的是腾讯地图jsApi开发h5进行web-view内嵌页面，部分模块采用腾讯地图小程序api。

问题总结：

实际开发过程当中，发现腾讯地图的定位相应速度比较慢，且精准定位会有偏差，获取定位点与城市定位采用高德地图比较合适
腾讯地图移动端自定义覆盖物click无响应

官方提供的用touchstart太灵敏，怎么解决？

自己绑定tap事件

const tap = function(dom,callback){
		/*单击操作的特点
		* 1.单击只有一根手指
		* 2.判断手指开始触摸和手指松开的时间差异不能大于指定的值  300/150
		* 3.保证没有滑动操作，如果有抖动必须保证抖动的距离在指定范围内*/
		 
		let startTime,startX,startY;
		dom.addEventListener("touchstart",function(e){
		    /*判断是否只有一根手指进行操作*/
		    if(e.targetTouches.length > 1){ //说明不止一个手指
		        return;
		    }
		    /*记录手指开始触摸的时间*/
		    startTime=Date.now();
		    /*记录当前手指的坐标*/
		    startX= e.targetTouches[0].clientX;
		    startY= e.targetTouches[0].clientY;
		    /*来做一些与事件相关的初始化操作*/
		})
		
		/*touchend：当手指松开时候触发，意味着当前元素上已经没有手指对象了,所以无法通过targetTouches来获取手指对象*/
		dom.addEventListener("touchend",function(e){
		    /*判断是否只有一根手指进行操作*/
		    if(e.changedTouches.length > 1){ //说明不止一个手指
		        return;
		    }
		    /*判断时间差异  150ms*/
		    // console.log(Date.now()-startTime);
		    if(Date.now()-startTime > 150){ //长按操作
		        return;
		    }
		    /*判断松开手指时的坐标与触摸开始时的坐标的距离差异*/
		    let endX=e.changedTouches[0].clientX;
		    let endY=e.changedTouches[0].clientY;
		    /*这里暂且将距离差异定为6*/
		    if(Math.abs(endX-startX) < 6 && Math.abs(endY-startY) <6){
		        // console.log("这就是移动端的单击事件--tap事件");
		        /*执行tap事件响应后的处理操作*/
				callback && callback(e);
		    }
		})
	}

关于区域/商圈/楼盘数据量太多一下子显示导致地图卡顿且移动不顺怎么整？

//	初始化地图
this.mapEl = new TMap.Map(document.getElementById('container'), {
	center: center,//设置地图中心点坐标
	viewMode: '2D',
	zoom: this.zoom,   //设置地图缩放级别
	showControl: false
});

//	地图移动和缩放时获取当前可视范围
this.mapEl.on('zoom', (e)=>{
	this.zoom = e.target.getZoom();
	this.getBounds();
})

this.mapEl.on('panend', (e)=>{
	this.getBounds();
})

// 根据缩放/可视范围 显示相应覆盖物
getBounds() {
	//	获取可视范围
	let data = this.mapEl.getBounds();
	
	//	自定义覆盖物部分代码太多。。就不放了 说下大概逻辑
	用可视范围和你的 楼盘数据经纬度比对 在范围里面的 添加如自定义覆盖物素组，范围外的记得删除，不然数据多了 地图也会卡顿。 记得绑定上自己写的tap事件。
}