位置: 编程技术 - 正文
javascript html5 canvas实现可拖动省份的中国地图
编辑：rootadmin推荐整理分享javascript html5 canvas实现可拖动省份的中国地图，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
本文实例分享了html5 canvas可拖动省份的中国地图实现方法，供大家参考，具体内容如下
1.数据获取画地图需要省份边界坐标，理论上可以每次都用百度API获取数据并绘图，但为了增加效率，首先将所有坐标都获取下来并存入数据库中。新建省份数据数组轮询该数组，根据省份名称请求百度API获取坐标数据，并将数据以ajax方式放松给php
php得到数据后，解析数据并将数据存储到事先建好的数据库中
2.画地图(base地图画在mapCanvas层)轮询省份数组,并以ajax方式请求该省份边界坐标,然后绘图
3.画移动连线(连线和移动的省份画在moveMapCanvas层)当在地图上拖动省份时,出现若干条连接移动的省份和原省份的直线
4.事件鼠标按下事件:当点击到地图上时,要做的事是,判断点击位置,将位置信息转化成经纬度,再通过百度API根据经纬度获得省份名称。
鼠标移动事件：根据点击的省份名，获得数据，并实时重绘移动层的省份
鼠标抬起事件：设置dragging为false，clear移动层。
小结：功能、原理都很简单，但能熟悉canvas的一些属性和方法。canvas层是可以重叠到一起的，这样就可以在不同的层画不同的内容，方便维护和管理。
标签: javascript html5 canvas实现可拖动省份的中国地图
本文链接地址:https://www.jiuchutong.com/biancheng/377494.html 转载请保留说明！上一篇：js仿百度登录页实现拖动窗口效果(仿百度首页html代码静态)
下一篇：JavaScript获取图片像素颜色并转换为box-shadow显示(js 获取图片大小)
