首页 > 代码库 > canvas瓦片图加载

canvas瓦片图加载

最近做了一个canvs瓦片图的项目,由于初次尝试,踩了不少坑。下面罗列一下

1.没有dom不好选取,移动端的点击和移动同时触发--放在touchend里面判断,start的时候记录鼠标位置,end的时候看这个位置有没有移动,如果有位移就是move,没有就是点击

2.点击穿透问题,加了一个400毫秒的timeout解决

3.safari浏览器遇到图片没有onload的时候,就等于报错,不执行,导致重绘出问题。而chorme不会。

4.坐标转换过来的时候是json格式,需要截取字符串转换日期

var beginTime = data[i].CmsEvents.BeginTime;    //获取传过来的json时间戳

beginTime = beginTime.slice(6, 16);         //截取传过来的json时间戳

var endinTime = data[i].CmsEvents.EndTime;
endinTime = endinTime.slice(6, 16);
var bd = new Date(beginTime * 1000);      //获取现在的时间
var ed = new Date(endinTime * 1000);
var bdtime = (bd.getFullYear()) + "." +        //拼接成想要的格式,以“。”分隔
(bd.getMonth() + 1) + "." +
(bd.getDate());
var edtime = (ed.getFullYear()) + "." +
(ed.getMonth() + 1) + "." +
(ed.getDate());

用的比较low的办法

5.从后台获取的gps数据,需要绑定到前台,没有很好的办法,只能用canvas写,且建筑物在地图上的位置没有规律可循。所以就一个个写在获取gps成功的callback里。另外一定要记得引入百度地图的js。之前忘记了,一直获取不到坐标。

canvas瓦片图加载