地图热区自适应

//DOM结构
<section class="hot_area">
    <img src="hainanmap.jpg" usemap="#Map" width='100%' height='100%'>
    <map name="Map" id="hotArea">
        <area shape="poly" class="eswn_area eswn_eventdetail" id="north" coords="138,328,115,312,105,284,121,271,145,260,156,245,171,234,183,193,206,182,240,178,268,175,286,180,318,179,345,160,397,140,467,137,524,115,555,101,588,107,598,142,632,154,651,149,679,176,722,166,745,169,744,190,728,214,713,227,694,253,687,281,659,292,641,310,615,333,610,343,594,356,578,342,554,331,548,317,534,303,516,285,533,300,521,293,504,278,506,255,505,246,500,261,490,263,472,269,465,273,441,271,442,284,439,298,428,312,408,320,419,319,397,317,389,325,381,339,363,344,345,338,331,328,326,332,320,335,306,334,323,360,323,375,306,383,285,373,271,364,265,345,261,338,248,343,238,348,193,344,183,332,165,320,155,315" href="javascript:void(0);" />
        <area shape="poly" class="eswn_area eswn_eventdetail" id="east" coords="444,473,434,489,439,510,420,536,423,555,438,564,458,577,476,579,494,571,523,576,545,575,563,568,569,556,573,544,574,519,576,484,579,447,593,425,607,402,610,387,611,373,604,359,587,361,574,365,568,340,551,339,539,344,519,354,508,373,512,390,502,404,458,406,448,435,459,464" href="javascript:void(0);" />
        <area shape="poly" class="eswn_area eswn_eventdetail" id="south" coords="452,578,458,597,443,614,432,646,414,644,392,647,369,654,347,681,322,705,280,710,238,684,198,669,163,663,132,659,132,631,148,617,173,606,191,595,209,580,226,583,237,565,257,568,287,586,289,616,308,624,328,609,353,587,369,595,371,582,362,575,364,551,371,539,393,528,411,532,418,557" href="javascript:void(0);" />
        <area shape="poly" class="eswn_area eswn_eventdetail" id="west" coords="125,626,105,625,94,622,80,605,64,600,52,585,45,566,50,551,60,534,45,533,27,524,19,497,18,464,12,437,2,391,18,376,36,372,67,392,44,364,66,338,79,319,104,307,129,332,151,343,161,329,180,341,197,353,251,350,285,384,324,390,339,388,329,361,349,346,387,351,393,329,434,322,446,308,452,287,472,284,489,271,511,300,531,311,544,333,505,356,500,393,452,404,442,432,443,454,432,481,428,510,415,523,395,520,377,529,360,547,352,562,355,578,335,588,322,603,310,606,297,603,288,586,283,577,269,570,263,564,255,559,247,554,232,563" href="javascript:void(0);" />
        <area shape="poly" class="eswn_eventdetail" id="event_info" coords="650,3,650,67,674,91,708,86,724,67,725,2" href="rule.html" />
    </map>
</section>

//js页面加载时，初始化地图热区坐标点
getHotAreaAttr: function() {
    var areaObj = $('.eswn_eventdetail');
    var _self = this;
    $.each(areaObj, function(i, item) {
        var oldCoords = item.coords;
        var newcoords = _self.changeHotAreaDot(oldCoords);
        item.coords = newcoords;
    });
},
changeHotAreaDot: function(position) {
    var pageWidth = document.body.clientWidth; //获取页面宽度  
    var pageHeight = $('.hot_area').height(); //获取页面高度  

    var imageWidth = 750;
    var imageHeight = 761;

    var each = position.split(",");
    //获取每个坐标点  
    for (var i = 0; i < each.length; i++) {
        each[i] = Math.round(parseInt(each[i]) * pageWidth / imageWidth).toString(); //x坐标  
        i++;
        each[i] = Math.round(parseInt(each[i]) * pageHeight / imageHeight).toString(); //y坐标  
    }
    //生成新的坐标点  
    var newPosition = "";
    for (var i = 0; i < each.length; i++) {
        newPosition += each[i];
        if (i < each.length - 1) {
            newPosition += ",";
        }
    }
    return newPosition;
}