数据获取
搞定中国地图上能拖动的省份，第一步就是先把每个省份的边界坐标数据拿到手。别急，我们有个聪明点子，先把所有省份的坐标数据全都提前准备好了，存进数据库里，这样以后用就方便多了。接下来，搞一个省份数据的列表，挨个处理这个列表，用省份名字从百度API那要对应的坐标数据，再用 ajax 传给后台的 PHP 去办。等 PHP 处理完这些信息，再把它们塞回数据库，以后就能随时取出来用！
画地图
要画个中国地图，得有各个省份的边界坐标才行。咱们直接拿一个数组去找每个省份的边界点，再用ajax去取来。最后在HTML5 Canvas上把这些点都画出来，就是个好看的中国地图了。
var allZoneData = [{'name':'辽宁省','been':'yes','id':'01'},{'name':'吉林省','been':'yes','id':'02'},……];
画移动连线
当你随便在地图上拖拽个省份，系统会自动画出那俩省份之间的连线，这么做能让你清楚地知道你在干。简单来说，就是画条线，告诉你怎么走，去看看效果如何。
var myGeo = new BMap.Geocoder();
(function(){
for(var i = 0;i < allZoneData.length;i++){
getAllZone(allZoneData[i].name,allZoneData[i].been,allZoneData[i].id);
}
})();
//name为省份名，been表示是否去过，id为唯一标识，cir为省份圈号（有可能一个省份有两部分封闭圆圈构成）
function getAllZone (name,been,id) {
var data,temp;
var bdary = new BMap.Boundary();
bdary.get(name, function(rs){
var count = rs.boundaries.length;
for(var j = 0; j < count; j++){
var ply = new BMap.Polygon(rs.boundaries[j], {strokeWeight: 2, strokeColor: "#ff0000"});
data = ply.getPath();
$.ajax({
url: "addData.php",
type:"POST",
data: {'data':data,'name' : name,'cir':j,'been':been,'id':id},
success: function(txt){
console.log(txt);
},
error: function(){
alert('添加数据出错！');
}
});
}
});
}
事件处理
想要让省份图能拖动起来，得先处理好几个事件才能保证效果好！比如鼠标按下事件可以确定点在哪儿，把这个坐标变成经纬度后，用百度API就知道是哪个省了；接着就是鼠标移动事件，它会根据你选中的省份名，动态地调整移动图层上的省份分布，这样拖拽起来也更容易看清进度；最后是鼠标抬起事件，那时候就能把拖动状态设成false，清除一下与移动图层有关的东西，这样省份也就拖完了。
功能与原理
简单来说，我们能用Canvas做不少事儿！Canvas能让不同的东西重叠起来，就好比可以在一张纸上画出好多不一样的图画。学好了这些Canvas的技巧，你就能做出超酷的互动效果，而且还能更明白前端开发中的绘画技术到底有多棒喔！
var drawMap = function (context,data,l,t) { //context为绘制所在的层,l和t为相对位置,data为边界对象数组
if(data.been == 'yes'){
context.fillStyle = "green";
}else{
context.fillStyle = "grey";
}
context.globalAlpha = 0.8;
context.beginPath();
cleft = (data.coordinate[0].lng - temp_left) * bigger + l; //temp_left和temp_top为地图偏移位置.
ctop = (temp_top - data.coordinate[0].lat) * bigger + t; //bigger为放大倍数
context.moveTo(cleft,ctop);
for(var j = 1;j < data.coordinate.length;j++){
cleft = (data.coordinate[j].lng - temp_left) * bigger + l;
ctop = (temp_top - data.coordinate[j].lat) * bigger + t;
context.lineTo(cleft,ctop);
}
context.closePath();
context.stroke();
context.fill();
}
技术应用与拓展
除了能拖动省份这个特性，你知道吗？HTML5 Canvas的用途还有很多！比如我们能用它画实时图表，还可以做出好玩的交互式小游戏，甚至搞出炫酷的特效，开发者们都很喜欢用！Canvas给我们提供了好多好用的API和独特功能，我们可以充分发挥想象力，把它们融入到各种网站建设项目里去。
学习与分享
var drawLinkLine = function(data,l,t){ //此处的l和t表示移动的相对位置
for(var k = 0;k = 4.5 ? 4.5 : lineLength;
moveMapContext.lineWidth = 5 - lineLength;
moveMapContext.strokeStyle = "rgba(0,120,60,0.4)";
cleft = (data.coordinate[k].lng - temp_left) * bigger;
ctop = (temp_top - data.coordinate[k].lat) * bigger;
moveMapContext.moveTo(cleft,ctop);
cleft = (data.coordinate[k].lng - temp_left) * bigger + l;
ctop = (temp_top - data.coordinate[k].lat) * bigger + t;
moveMapContext.lineTo(cleft,ctop);
moveMapContext.closePath();
moveMapontext.stroke();
}
}
}
学着用JavaScrip和HTML5Canvas打造可拖拽的中国地图，这个小项目很好玩。你可以参考别人的代码，看看相关说明，然后动手试试看，这样能增加你对前端程序的了解。趁热打铁，把自己学会的东西教给别人，大家一起提高！
创新与发展
随着Web前端的前沿技术越来越厉害了，我们可以尝试玩点新颖的，搞些新的东西跟工具，让中国地图能拖着走！比如说，把SVG啊、CSS3什么的用上，地图就变得栩栩如生，互动性也很强嘛；或者试试WebGL这种3D技术，地图就能展现出强大的立体感和视觉冲击力！做前端开发就要敢于创新和尝试，这才是我们不断提高自己的秘诀！
总结与展望
$('#eventCanvas').mousedown(function(ev){
//获取点击canvas的坐标
var mouseX, mouseY;
if(ev.layerX || ev.layerX==0){
mouseX = ev.layerX;
mouseY = ev.layerY;
}else if(ev.offsetX || ev.offsetX==0){
mouseX = ev.offsetX;
mouseY = ev.offsetY;
}
//保存点击时的原坐标值
tempX = mouseX;
tempY = mouseY;
//将坐标转化为经纬度
mouseX = mouseX/bigger + temp_left;
mouseY = temp_top - mouseY/bigger;
if(opts.dragAll){
draging = true;
}else{
moveMapContext.clearRect(0, 0, 1100, 630);
//根据经纬度获得所在地理位置并获取边界坐标再画线
myGeo.getLocation(new BMap.Point(mouseX, mouseY),
function(result){
tempName = '';
draging = true;
name = result.addressComponents.province;
tempName = name;
pubFuns.drawMoveLayerLine(0,0);
});
}
});
这篇文章告诉你怎么用JavaScript和HTML5 Canvas搞定可以拖动的中国地图功能，懂得找数据画图和处理事件就行。希望你能从中学到东西，多试试看这些方法。随着前端技术日新月异，相信以后Canvas会做出更多有趣、实用的Web应用。
评论0