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,1
41,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,1 17,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,1 58,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,7 0,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.p ng">
<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,16 2,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,14 8,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,15 5,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,23 0,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,18 3,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,20 6,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,22 9,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,15
3,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,17 6,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,19 9,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,16 5,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”，则该值规定多边形各边的坐标。如果
第⼀个坐标和最后⼀个坐标不⼀致，那么为了关闭多边形，浏览器必
须添加最后⼀对坐标。
热点图⾃适应
接下来就该来弄下热区图⾃适应问题。其实就是透过js脚本监听页⾯⼤⼩变化，同步更新coords中的坐标。
<!-- 引⼊百度cdn的jquery库 -->
<script src="libs.baidu/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,1 37,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,1 08,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,17 9,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,12 3,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,25 1,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,20 3,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,19 5,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,22 2,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,15 8,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,16 9,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 = ElementById("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 = und(parseInt((_imageWidth * cur_imageHeight) / imageHeigth)); var each = position.split(",");
//获取每个坐标点
for (var i = 0; i < each.length; i++) {
each[i] = und(parseInt(each[i]) * cur_imageWidth / imageWidth);//x坐标
i++;
each[i] = und(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;
}
html href属性</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。