最近开发一个地产资讯类型项目,需要做一个地图找房,负责地图的前端跑路了,怎么办?只能上手干了- -
选型使用腾讯地图,因为项目的主打小程序关系,主要用的是腾讯地图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事件。
}
- 其他说明
剩下的东西就基本没问题了,关于自定义覆盖物 可以去看腾讯地图例子,还是比较清晰的; 关于点聚合 是可以用自定义覆盖物替代相关图型,但是比较麻烦 因目前做的地图找房没有商圈这一层级,摸索了一下就没看了- -,有实践的大佬可以@教教我