html的map热力图（一）

    因为团队对地图引擎的研究工作正在起步，包括地图制作，地图发布需要一定时间了解。但是前端需求依旧在不停迭代，刚好首页需要展示某个地市的地图及其分区，无奈之下只要用html的map来实现这个功能。ps：真是个苦力活，太不智能了。

<map> 标签

带有可点击区域的图像映射

    <div>                
            <img src="area_hc.png" width="241" height="287" usemap="#Map">
            <map id="Map" name="Map">
                <area shape="poly" data_ID="1" coords="73,2,76,5,79,6,81,10,84,13,86,20,84,26,82,28,82,33,83,37,82,44,81,51,81,58,84,66,88,72,90,79,94,84,95,88,100,89,105,88,111,88,117,94,119,98,123,102,128,107,130,112,129,116,129,118,127,118,122,118,121,116,119,114,118,115,117,117,115,118,112,118,108,118,106,116,106,116,103,117,104,121,106,125,102,126,99,126,98,126,95,129,95,136,97,139,101,139,105,139,107,141,108,141,114,139,117,137,119,136,123,141,125,146,132,149,136,146,131,150,124,154,123,158,120,161,113,166,115,172,115,177,115,184,117,189,118,196,118,198,108,199,101,201,96,201,93,200,88,196,82,190,81,186,80,185,75,183,72,183,69,176,65,172,62,170,61,166,59,162,54,158,46,156,38,154,33,150,31,141,32,135,31,130,29,123,30,119,32,115,35,111,35,108,35,104,32,98,29,94,25,93,20,91,13,88,11,83,5,77,3,74,3,70,5,66,10,62,9,54,8,45,10,41,13,39,16,39,21,39,26,39,34,39,39,39,41,39,43,39,48,34,51,25,54,19,59,16,63,13,63,10,70,8,72,5" href="street_df.png">
              <area shape="poly" data_ID="2" coords="136,145,141,146,145,146,150,148,155,148,163,146,173,147,179,149,184,151,188,159,189,162,191,169,191,173,190,179,189,181,186,185,185,189,182,191,180,193,176,193,174,189,170,190,167,190,165,192,163,194,160,197,156,197,148,197,140,197,131,197,123,197,117,196,118,192,118,186,117,181,117,175,119,167,119,165,120,163,123,161,132,155,129,153,133,149,126,155,124,158" href="street_xy.png">
              <area shape="poly" data_ID="3" coords="166,200,167,202,175,206,176,211,170,205,176,208,180,211,182,214,184,221,186,223,187,230,187,236,187,244,187,251,187,259,184,263,181,266,176,266,173,266,169,266,167,263,162,266,162,273,159,277,164,279,169,279,174,281,183,283,193,283,197,283,203,283,205,280,205,275,205,269,201,263,199,253,196,246,196,240,196,235,199,229,203,226,207,221,214,216,221,206,226,202,233,198,237,195,239,191,238,187,235,185,235,186,233,185,234,187,234,184,231,184,228,182,225,181,225,174,230,174,226,171,229,174,226,171,223,170,222,167,220,163,217,160,215,156,212,154,208,156,208,158,204,159,204,158,200,158,196,156,195,154,191,156,190,153,190,153,189,154,194,158,196,155,189,160,191,167,191,172,193,175,193,179,192,182,190,185,188,190,187,192,184,193,182,193,178,193,176,192,172,191,171,191,169,191,166,193,165,196,162,197,165,198,165,199" href="street_sy.png">
              <area shape="poly" data_ID="4"  coords="97,203,100,204,104,203,106,202,111,201,117,201,123,199,129,198,140,198,151,198,156,199,161,200,164,203,168,206,171,211,174,216,178,220,181,227,181,233,182,239,184,244,184,251,184,256,181,258,178,259,171,259,169,260,165,261,160,266,155,273,151,274,147,273,143,272,137,271,129,271,123,270,116,268,110,266,104,264,101,263,97,260,93,257,92,253,90,250,90,245,92,242,95,237,95,232,99,224,101,216,100,211,99,207" href="street_hc.png">
            </map>
        </div>

定义和用法

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

提示和注释：

注释：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

注释：<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

<area> 标签属性

属性	值	描述
coords	坐标值	定义可点击区域（对鼠标敏感的区域）的坐标。
href	URL	定义此区域的目标 URL。
nohref	nohref	从图像映射排除某个区域。
shape	default、rect、circ、poly	定义区域的形状。依次是：规定全部区域、定义矩形区域、定义圆形、定义多边形区域
target	_blank、_parent、_self、_top	规定在何处打开 href 属性指定的目标 URL。

shape和coords的配套使用

coords 属性规定区域的 x 和 y 坐标。 
coords 属性与 shape 属性配合使用，来规定区域的尺寸、形状和位置。 
图像左上角的坐标是 “0,0”。

值	描述
x1,y1,x2,y2	如果 shape 属性设置为 “rect”，则该值规定矩形左上角和右下角的坐标。
x,y,radius	如果 shape 属性设置为 “circ”，则该值规定圆心的坐标和半径。
x1,y1,x2,y2,..,xn,yn	如果 shape 属性设置为 “poly”，则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。

本文主要是使用 shape=”poly”属性，进行不规则形的热区切割。当然，对于所谓的点坐标应该如何切割呢，我们可以借用dreamweaver进行操作。可以参考一下文章进行操作： 
http://jingyan.baidu.com/article/c275f6bac0eb22e33d75671b.html

热点图自适应

    接下来就该来弄下热区图自适应问题。其实就是透过js脚本监听页面大小变化，同步更新coords中的坐标。

<!-- 引入百度cdn的jquery库 -->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var street_df_coords = '73,2,76,5,79,6,81,10,84,13,86,20,84,26,82,28,82,33,83,37,82,44,81,51,81,58,84,66,88,72,90,79,94,84,95,88,100,89,105,88,111,88,117,94,119,98,123,102,128,107,130,112,129,116,129,118,127,118,122,118,121,116,119,114,118,115,117,117,115,118,112,118,108,118,106,116,106,116,103,117,104,121,106,125,102,126,99,126,98,126,95,129,95,136,97,139,101,139,105,139,107,141,108,141,114,139,117,137,119,136,123,141,125,146,132,149,136,146,131,150,124,154,123,158,120,161,113,166,115,172,115,177,115,184,117,189,118,196,118,198,108,199,101,201,96,201,93,200,88,196,82,190,81,186,80,185,75,183,72,183,69,176,65,172,62,170,61,166,59,162,54,158,46,156,38,154,33,150,31,141,32,135,31,130,29,123,30,119,32,115,35,111,35,108,35,104,32,98,29,94,25,93,20,91,13,88,11,83,5,77,3,74,3,70,5,66,10,62,9,54,8,45,10,41,13,39,16,39,21,39,26,39,34,39,39,39,41,39,43,39,48,34,51,25,54,19,59,16,63,13,63,10,70,8,72,5';
var street_xy_coords = '136,145,141,146,145,146,150,148,155,148,163,146,173,147,179,149,184,151,188,159,189,162,191,169,191,173,190,179,189,181,186,185,185,189,182,191,180,193,176,193,174,189,170,190,167,190,165,192,163,194,160,197,156,197,148,197,140,197,131,197,123,197,117,196,118,192,118,186,117,181,117,175,119,167,119,165,120,163,123,161,132,155,129,153,133,149,126,155,124,158';
var street_sy_coords = '166,200,167,202,175,206,176,211,170,205,176,208,180,211,182,214,184,221,186,223,187,230,187,236,187,244,187,251,187,259,184,263,181,266,176,266,173,266,169,266,167,263,162,266,162,273,159,277,164,279,169,279,174,281,183,283,193,283,197,283,203,283,205,280,205,275,205,269,201,263,199,253,196,246,196,240,196,235,199,229,203,226,207,221,214,216,221,206,226,202,233,198,237,195,239,191,238,187,235,185,235,186,233,185,234,187,234,184,231,184,228,182,225,181,225,174,230,174,226,171,229,174,226,171,223,170,222,167,220,163,217,160,215,156,212,154,208,156,208,158,204,159,204,158,200,158,196,156,195,154,191,156,190,153,190,153,189,154,194,158,196,155,189,160,191,167,191,172,193,175,193,179,192,182,190,185,188,190,187,192,184,193,182,193,178,193,176,192,172,191,171,191,169,191,166,193,165,196,162,197,165,198,165,199';
var street_hc_coords = '97,203,100,204,104,203,106,202,111,201,117,201,123,199,129,198,140,198,151,198,156,199,161,200,164,203,168,206,171,211,174,216,178,220,181,227,181,233,182,239,184,244,184,251,184,256,181,258,178,259,171,259,169,260,165,261,160,266,155,273,151,274,147,273,143,272,137,271,129,271,123,270,116,268,110,266,104,264,101,263,97,260,93,257,92,253,90,250,90,245,92,242,95,237,95,232,99,224,101,216,100,211,99,207';
$(function(){
    $(window).resize(function(event) {
        var coords = new Array();
        coords.push(street_df_coords);
        coords.push(street_xy_coords);
        coords.push(street_sy_coords);
        coords.push(street_hc_coords);
        resizeMap(coords, '241', '287');
    });
});
//热区图坐标计算，这里需要注意的是宽和高是原图片的宽和高
function resizeMap(o_coords, imageWidth, imageHeigth) {
    var map = document.getElementById("center_map");
    var element = map.childNodes;
    for (var i = 0; i < element.length; i++) {
        var oldCoords = o_coords[i]; 
        var newcoords = residePointPosition(oldCoords, imageWidth, imageHeigth);  
        element[i].setAttribute("coords", newcoords);  
    }
    var test = element;
}
//调整MAP中坐标  
function residePointPosition(position, _imageWidth, _imageHeigth) {
    var imageWidth = _imageWidth;//213;  
    var imageHeigth = _imageHeigth;//242;  
    var cur_imageHeight = $('#center_img').height();
    //var cur_imageWidth = $('#center_img').width();
    var cur_imageWidth = Math.round(parseInt((_imageWidth * cur_imageHeight) / imageHeigth));
    var each = position.split(",");  
    //获取每个坐标点  
    for (var i = 0; i < each.length; i++) {  
        each[i] = Math.round(parseInt(each[i]) * cur_imageWidth / imageWidth);//x坐标  
        i++;  
        each[i] = Math.round(parseInt(each[i]) * cur_imageHeight / imageHeigth);//y坐标  
    }
    //生成新的坐标点  
    var newPosition = "";  
    for (var i = 0; i < each.length; i++) {  
        newPosition += each[i];  
        if (i < each.length - 1) {  
            newPosition += ",";  
        }  
    }
    return newPosition;  
}
</script>

这下，用ie10，chrome测试了下，确定没问题后，算是大功告成，终于可以出去抽烟了。 
可以直接通过下面链接查看源码 
https://git.oschina.net/wolfpire/map-example.git