首先，我们创建一个html文件，在head标签中依次引入echartsjs和chinajs文件，在body标签中创建一个div容器，用于放置绘制的地图，代码如下接着，我们需要js随机生成一些测试数据，用于在绘制地图时，根据数值显示不同颜色的。

html5事件最小细度在DOM上，所以我们无法对canvas上的图像做监听，只能对canvas监听首先监听鼠标mousedown事件，等事件发生之后，再监听鼠标mousemove事件和mouseup事件 mousemove事件发生之后，获得鼠标移动的位移，相应的图片的位置。

百度地图apiphp？title=jspopular 补充要做离线最好别用web端来做后来发现，echarts来实现你的需求应该也是可以的html#mapworlddataRange。

本文实例分享了html5 canvas可拖动省份的中国地图实现方法，供大家参考，具体内容如下 鼠标移动事件根据点击的省份名，获得数据，并实时重绘移动层的省份 #39#eventCanvas#39mousemovefunctionev var mouseX， mouseY。

点击生成时将rect的起始点存在一个数组里然后最好在外面设置一个input框，然后每次生成之后，需要input输入节点的内容，最后设置一个右键事件表示事件结束置于焦点和交点处逻辑也要考虑到。

第一步在浏览器中打开百度地图生成器 第二步图中右侧为自定义，根据自己的需求填写相关信息 第三步点击获取代码按钮，会自动生成代码，将代码写入页面中即可，也可以使用iframe标签完成引用。

1打开网页百度搜索引擎，输入百度API，然后点击进入如图 2在进入百度API之后，选择栏目项开发地图生成器选项，单击进入如下图 3在打开的新的窗口页面时，设置自己的区域，精确查找等要设置的地点如图 4。

打开百度，点击上方地图点击地图下方地图开放平台点击开发文档选择地图名片点击开始制作按照提示第一步操作填写基本信息提示第二步操作，选择名片图片，生成名片链接HTML5是构建Web内容的一种。

如果你的网站的网页数量少于500个，那么建议你使用在线的网站地图制作工具打开输入目标网址，然后点击开始，几分钟后，这个在线工具就会给你制作出XMLhtmltxt三种不同格式的网站地图，下载即可2使用工具制作中型网站地图。

1登录百度地图api，地址indexhtml 2设置你的地理位置，以北京大学为例子如图3简单设置下地图功能，也可以不设置地图的宽度和高度根据网页空间的大小设置就可以4。

我觉得吧，你要先把每个地图形状都裁剪成单独的图片，然后用canvas才绘制每个图片，然后在晋城放大等操作。

用图像热点设置有效利用ltimg标签的usemap属性，给图片划分一个地图，设定图片热点即给图片分区，但不是切割，图片还是完整的，只是用代码将图片分成几个部分，然后给热点设定相应的链接usemap属性的用法使用时。

看到你标题说HTML5能画地图，就来了兴趣，特意百度了下资料，不过资料上的地图好像是一张图片，并非画出来的，不免有些失望以下是我搜到的一篇资料，你说的缩放拖动上面都写了。

创建成功后，当前的应用就会显示在应用列表中，这里我们需要记住应用的AK值，后面的html代码中需要用到，如下2创建成功后，我们就可以在网页中引入街景地图了，主要是创建一个div容器，然后通过JSAPI引入街景地图到这个容器。

这个用JS做，会比较好，用HTML的话可以用divhover backgroundcolorred来实现鼠标经过身份颜色变，但弹出层就要JS做了可以从网站上找找相关素材看看别人是怎么写的，希望对你有 帮助，望采纳。

indexhtml？pfto=pcc2c 2如果非需要第一步的独立操作，可以在搜狗地图腾讯地图等多地图网站中，获取连接API接口信息，进行调用，使网站可以进行实时标记定位。