时间:2021-07-01 10:21:17 帮助过:31人阅读
本文实例分享了html5 canvas可拖动省份的中国地图实现方法,供大家参考,具体内容如下
1.数据获取
画地图需要省份边界坐标,理论上可以每次都用百度API获取数据并绘图,但为了增加效率,首先将所有坐标都获取下来并存入数据库中。
新建省份数据数组
代码如下:
var allZoneData = [{'name':'辽宁省','been':'yes','id':'01'},<span style="font-family: Arial, Helvetica, sans-serif;">{'name':'吉林省','been':'yes','id':'02'},……];</span>
轮询该数组,根据省份名称请求百度API获取坐标数据,并将数据以ajax方式放松给php
php得到数据后,解析数据并将数据存储到事先建好的数据库中
<?php header("content-type:text/html; charset=utf-8"); $data = $_REQUEST['data']; $name = $_REQUEST['name']; $cir = $_REQUEST['cir']; $been = $_REQUEST['been']; $id = $_REQUEST['id']; $con = mysql_connect("localhost","……","……"); if (!$con){ die('Could not connect: ' . mysql_error()); } mysql_select_db("……", $con); mysql_set_charset('utf8',$con); foreach ($data as $temp){ $sql = "insert into place (id,name,lng,lat,cir,been) values ('".$id."', '".$name."', '".$temp['lng']."','".$temp['lat']."','".$cir."','".$been."')"; if (!mysql_query($sql,$con)){ die('Error: ' . mysql_error()); } } mysql_close($con); echo 'Success'; ?>
2.画地图(base地图画在mapCanvas层)
轮询省份数组,并以ajax方式请求该省份边界坐标,然后绘图
3.画移动连线(连线和移动的省份画在moveMapCanvas层)
当在地图上拖动省份时,出现若干条连接移动的省份和原省份的直线
4.事件
鼠标按下事件:当点击到地图上时,要做的事是,判断点击位置,将位置信息转化成经纬度,再通过百度API根据经纬度获得省份名称。
鼠标移动事件:根据点击的省份名,获得数据,并实时重绘移动层的省份
鼠标抬起事件:设置dragging为false,clear移动层。
小结:功能、原理都很简单,但能熟悉canvas的一些属性和方法。canvas层是可以重叠到一起的,这样就可以在不同的层画不同的内容,方便维护和管理。
以上就是本文的全部内容,希望对大家的学习有所帮助。
相关推荐:
关于HTML5实现图片压缩上传功能
以上就是javascript html5 canvas实现可拖动省份的中国地图的详细内容,更多请关注Gxl网其它相关文章!