使ImageMap适合父容器

Question

我需要一些帮助来尝试缩放或适应我的图像地图<map>和它的<area>坐标到父div。我尝试使用jquery.fitToParent.js插件，但没有成功。使用我的img响应类可以很好地适应我的图像。这是我到目前为止所知道的：

HTML

<div class="col-sm-8" id="map_transform_wrapper">
<img id="ImageMaps-img" src="/app/assets/img/map/map_us_blue.png" border="0" width="1283" height="851" orgWidth="1283" orgHeight="851" usemap="#image-map-us" alt="" class="img-responsive" />
<map name="image-map-us" id="image-map-us">
<area id="maping_west" alt="West" title="West" href="#" shape="poly" coords="116,7,205,34,306,52,494,74,484,328,528,331,531,458,358,447,233,429,226,442,225,454,217,459,204,458,204,470,202,488,210,504,209,517,201,527,196,543,198,556,195,569,110,563,88,504,63,486,42,472,30,444,14,388,8,345,4,247,22,167,60,69,56,19" style="outline:none;" target="_self"     />
<area id="maping_west_hi" alt="West-HI" title="West-HI" href="#" shape="poly" coords="71,666,109,709,157,787,162,849,132,854,113,839,81,750,46,700,38,674" style="outline:none;" target="_self"     />
<area id="maping_west_ak" alt="West-AK" title="West-AK" href="#" shape="poly" coords="251,717,289,680,336,669,385,699,387,778,396,793,419,792,457,835,442,853,345,814,300,845,244,844,236,736" style="outline:none;" target="_self"     />
<area id="maping_midwest" alt="Midwest" title="Midwest" href="#" shape="poly" coords="497,71,484,327,533,331,530,456,641,459,712,455,718,469,827,460,832,465,834,474,854,444,866,433,882,406,914,395,932,382,952,356,965,355,999,358,1014,355,1042,305,1043,273,1032,238,971,194,938,141,917,110,713,72" style="outline:none;" target="_self"     />
<area id="maping_southwest" alt="Southwest" title="Southwest" href="#" shape="poly" coords="744,692,742,668,747,637,729,592,723,557,718,515,709,457,515,460,507,468,507,457,230,430,223,462,211,463,209,488,216,509,210,526,199,568,301,620,357,619,407,613,437,639,465,691,498,707,520,685,551,695,585,745,605,776,644,808,661,809,664,752" style="outline:none;" target="_self"     />
<area id="maping_southeast" alt="Southeast" title="Southeast" href="#" shape="poly" coords="1159,461,1182,442,1180,407,1170,377,1152,368,1145,344,1114,321,1094,317,1069,314,1045,316,1015,369,982,369,956,360,886,414,858,455,847,479,828,478,825,465,725,476,730,555,746,580,743,609,760,635,755,681,791,687,829,692,876,696,873,655,913,649,965,641,995,653,1021,646,1049,663,1062,721,1091,753,1106,772,1124,782,1141,772,1136,720,1093,644,1078,600,1093,552" style="outline:none;" target="_self"     />
<area id="maping_northeast" alt="Northeast" title="Northeast" href="#" shape="poly" coords="1046,219,1065,203,1060,185,1098,176,1108,142,1150,97,1201,73,1219,9,1248,5,1258,28,1282,48,1272,80,1235,124,1239,162,1261,165,1251,190,1211,206,1181,259,1172,336,1165,349,1116,307,1096,292,1060,305,1037,242" style="outline:none;" target="_self"     />
</map>

​

使用JQUERY

var $el = $("#image-map-us");
var elHeight = $el.outerHeight();
var elWidth = $el.outerWidth();

var $wrapper = $("#map_transform_wrapper");

$wrapper.resizable({
  resize: doResize
});

function doResize(event, ui) {

  var scale, origin;

  scale = Math.min(
    ui.size.width / elWidth,
    ui.size.height / elHeight
  );

  $el.css({
    transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
  });

}

var starterData = {
  size: {
    width: $wrapper.width(),
    height: $wrapper.height()
  }
}
doResize(null, starterData);

使用插件

$('#image-map-us').fitToParent();

Answer 1

如果有人遇到同样的问题，我发现了一个很好的插件。https://github.com/stowball/jQuery-rwdImageMaps