html5地图图片拖拽,javascript html5 canvas实现可拖动省份的中国地图

本文实例分享了html5 canvas可拖动省份的中国地图实现方法，供大家参考，具体内容如下

1.数据获取

画地图需要省份边界坐标，理论上可以每次都用百度API获取数据并绘图，但为了增加效率，首先将所有坐标都获取下来并存入数据库中。

新建省份数据数组

var allZoneData = [{'name':'辽宁省','been':'yes','id':'01'},{'name':'吉林省','been':'yes','id':'02'},……];

轮询该数组，根据省份名称请求百度API获取坐标数据，并将数据以ajax方式放松给php

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){ </