如何调整地图大小？

Question

我有关于地图resize的问题。我们使用区域coord制作地图。当我调整地图缩小以适当调整大小时，调整地图图像的大小不会在我刷新页面时调整大小以便调整大小。

下面显示html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-map">
        <img src="images/project-map.jpg" width="1188" height="990" alt="map" usemap="#plantmap" class="img-responsive map-img" id="myimage">
        <map name="plantmap" id="map_ID">
            <area shape="poly" coords="218,400,306,336,334,368,243,434,217,400">
            <area shape="poly" coords="243,434,334,368,360,396,268,464">
            <area shape="poly" coords="296,497,387,426,362,397,268,464,296,496">
            <area shape="poly" coords="324,530,416,458,388,427,296,496,324,530">
            <area shape="poly" coords="352,565,446,490,416,458,324,530,351,565">
            <area shape="poly" coords="352,564,446,490,462,507,462,512,464,516,468,520,468,526,469,530,399,586,394,587,387,587,380,586,374,585,352,564">
            <area shape="poly" coords="446,491,506,443,522,460,524,465,524,470,525,474,523,481,521,486,485,515,480,510,476,504,467,500,462,504,445,492">
            <area shape="poly" coords="446,490,507,443,474,412,416,457,446,490">
            <area shape="poly" coords="415,458,476,412,447,382,386,425,415,458">
            <area shape="poly" coords="389,426,447,382,420,354,361,396,388,425">
            <area shape="poly" coords="361,397,419,353,394,326,334,366,362,396">
            <area shape="poly" coords="305,334,364,292,371,288,377,290,383,287,388,288,411,312,334,367,306,334">
            <area shape="poly" coords="412,311,484,260,452,229,382,278,384,287,410,311">
            <area shape="poly" coords="455,327,511,286,485,260,428,300,456,327">
            <area shape="poly" coords="483,355,540,312,512,286,455,326,482,354">
            <area shape="poly" coords="512,384,569,340,540,312,484,354,512,384">
            <area shape="poly" coords="542,414,598,368,570,340,512,383,542,414">
            <area shape="poly" coords="630,398,598,368,542,412,558,430,564,432,569,434,574,435,578,436,584,434,589,432,628,397,452,228">
            <area shape="poly" coords="598,368,652,327,662,338,668,342,670,347,670,354,670,359,668,365,666,369,628,398,598,367">
            <area shape="poly" coords="598,369,652,327,621,300,570,340,598,368">
            <area shape="poly" coords="539,312,594,273,622,300,570,341,538,311">
            <area shape="poly" coords="540,313,593,273,565,247,513,284,540,312">
            <area shape="poly" coords="514,286,565,247,538,222,486,260,514,285">
            <area shape="poly" coords="452,228,504,190,536,223,485,259,451,228">
            <area shape="poly" coords="568,200,620,165,602,150,596,149,594,144,565,156,534,167,568,200">
            <area shape="poly" coords="596,224,647,188,620,164,568,199,596,222">
            <area shape="poly" coords="625,249,674,211,647,187,596,223,625,249">
            <area shape="poly" coords="654,276,704,237,675,210,624,249,654,276">
            <area shape="poly" coords="684,301,733,263,703,236,653,275,683,300">
            <area shape="poly" coords="733,262,765,289,726,319,720,319,712,320,706,319,701,318,683,300,733,262">
            <area shape="poly" coords="946,253,916,226,878,259,874,265,873,268,873,273,873,278,876,280,878,286,880,290,886,284,890,280,896,282,895,292,892,296,894,298,945,251">
            <area shape="poly" coords="895,298,945,253,978,281,952,304,954,295,954,285,948,288,940,294,935,296,931,304,926,309,926,315,924,324">
            <area shape="poly" coords="964,354,1011,308,978,282,929,326,963,355">
            <area shape="poly" coords="995,380,1045,338,1011,308,963,355,997,378">
            <area shape="poly" coords="1036,411,1081,367,1045,336,996,378,1034,411">
            <area shape="poly" coords="1077,446,1122,400,1080,366,1034,412,1079,446">
            <area shape="poly" coords="996,522,1047,474,1005,439,958,486,996,523">
            <area shape="poly" coords="957,487,1005,440,970,410,919,454,956,487">
            <area shape="poly" coords="920,455,969,410,933,380,884,426,920,454">
            <area shape="poly" coords="884,425,933,380,898,352,849,394,884,425">
            <area shape="poly" coords="848,394,899,351,865,325,816,365,848,393">
            <area shape="poly" coords="786,337,822,308,828,306,834,306,841,307,846,310,866,324,816,365,784,337">
            <area shape="poly" coords="746,371,785,338,817,366,780,396,781,386,778,380,770,381,765,386,760,392,759,400,759,406,750,396,746,392,743,386,744,378,745,369">
            <area shape="poly" coords="796,440,851,394,816,365,764,409,796,440">
            <area shape="poly" coords="798,440,848,394,884,426,833,470,797,439">
            <area shape="poly" coords="869,503,920,456,886,426,832,471,868,504">
            <area shape="poly" coords="868,503,920,455,957,487,929,516,922,516,915,519,913,524,905,528,904,537,866,503">
            <area shape="poly" coords="947,575,996,521,956,486,928,516,934,520,934,526,932,532,927,537,920,537,917,544,912,544,948,574">
            <area shape="poly" coords="861,666,916,608,871,569,819,621,860,665">
            <area shape="poly" coords="818,622,870,568,835,534,779,585,818,621">
            <area shape="poly" coords="745,551,799,500,836,535,780,585,746,550">
            <area shape="poly" coords="711,517,764,470,799,501,745,551,711,517">
            <area shape="poly" coords="676,485,732,438,766,470,710,518,676,484">
            <area shape="poly" coords="646,454,678,485,731,438,716,424,711,422,706,420,702,419,697,418,694,418,690,419,686,421,644,454">
            <area shape="poly" coords="618,535,677,484,645,453,604,490,600,495,600,499,599,502,599,505,600,510,601,516,617,534">
            <area shape="poly" coords="710,518,662,562,661,554,656,551,652,550,648,550,643,557,620,536,678,485">
            <area shape="poly" coords="686,604,744,552,710,517,653,569,686,603">
            <area shape="poly" coords="686,606,745,551,781,588,722,641,686,605">
            <area shape="poly" coords="759,680,818,622,780,586,721,640,758,679">
            <area shape="poly" coords="788,746,861,666,817,622,742,698,787,746">
            <area shape="poly" coords="708,832,789,746,742,699,660,778,708,830">
            <area shape="poly" coords="722,718,686,678,624,736,661,778,722,717">
            <area shape="poly" coords="622,736,685,677,649,639,588,696">
            <area shape="poly" coords="588,696,650,640,614,602,552,657,588,696">
            <area shape="poly" coords="552,658,614,603,582,568,521,620,552,658">
            <area shape="poly" coords="489,586,536,547,542,546,548,546,556,546,562,550,568,554,582,569,522,620,489,587">
            <area shape="poly" coords="449,681,520,620,489,586,440,626,438,631,435,635,432,640,432,646,431,650,432,654,432,659,450,680">
            <area shape="poly" coords="482,721,553,658,520,620,449,680,480,721">
            <area shape="poly" coords="518,762,588,696,553,657,482,720,518,762">
            <area shape="poly" coords="552,803,623,736,586,695,518,762,550,802">
            <area shape="poly" coords="588,846,660,778,623,735,551,802,587,846">
            <area shape="poly" coords="640,906,709,832,659,777,586,846,640,906">
        </map>
    </div>
    
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/jquery.maphilight.js" type="text/javascript"></script>
    <script src="js/jQuery-rwdImageMaps.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#myimage').rwdImageMaps();
    
            var states = [1, 5, 37, 40, 62, 20, 35, 50, 44];
            var area = document.getElementsByTagName('area');
            for (var i = 0; i < area.length; i++) {
                area[i].id = i + 1;
            }
            $.each(states, function (index, value) {
                var data = $('#' + value).mouseout().data('maphilight') || {};
                data.alwaysOn = !data.alwaysOn;
                $('#' + value).data('maphilight', data).trigger('alwaysOn.maphilight');
            });
            $('#myimage').maphilight();
    
        });
    </script>
    <script>
        var resizeEvt;
        (function ($) {
            $(window).on('resize', function () {
                clearTimeout(resizeEvt);
                resizeEvt = setTimeout(function () {
                    $('#myimage').maphilight();
                });
            });
        })(jQuery);
    </script>

我们有两个js使用第一个maphilight是地图坐标做高光和rwdImageMaps是坐标调整大小。 请帮忙！

Answer 1

好像这样工作正常：

（注意图像中的类img-fluid）

$(document).ready(function () {
  $('#myimage').rwdImageMaps();
  var states = [1, 5, 37, 40, 62, 20, 35, 50, 44];
  var area = document.getElementsByTagName('area');
  for (var i = 0; i < area.length; i++) {
    area[i].id = i + 1;
  }
  $.each(states, function (index, value) {
    var data = $('#' + value).mouseout().data('maphilight') || {};
    data.alwaysOn = !data.alwaysOn;
    $('#' + value).data('maphilight', data).trigger('alwaysOn.maphilight');
  });
  $('#myimage').maphilight();
  var resizeEvt;
  $(window).on('resize', function () {
    clearTimeout(resizeEvt);
    resizeEvt = setTimeout(function () {
      $('#myimage').maphilight();
    });
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap-reboot.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap-grid.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.3.1/jquery.maphilight.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
<div class="row">
  <div class="project-map">
    <img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250" width="1188" height="990" alt="map" usemap="#plantmap" class="img-fluid map-img" id="myimage">
    <map name="plantmap" id="map_ID">
      <area shape="poly" coords="218,400,306,336,334,368,243,434,217,400">
      <area shape="poly" coords="243,434,334,368,360,396,268,464">
      <area shape="poly" coords="296,497,387,426,362,397,268,464,296,496">
      <area shape="poly" coords="324,530,416,458,388,427,296,496,324,530">
      <area shape="poly" coords="352,565,446,490,416,458,324,530,351,565">
      <area shape="poly" coords="352,564,446,490,462,507,462,512,464,516,468,520,468,526,469,530,399,586,394,587,387,587,380,586,374,585,352,564">
      <area shape="poly" coords="446,491,506,443,522,460,524,465,524,470,525,474,523,481,521,486,485,515,480,510,476,504,467,500,462,504,445,492">
      <area shape="poly" coords="446,490,507,443,474,412,416,457,446,490">
      <area shape="poly" coords="415,458,476,412,447,382,386,425,415,458">
      <area shape="poly" coords="389,426,447,382,420,354,361,396,388,425">
      <area shape="poly" coords="361,397,419,353,394,326,334,366,362,396">
      <area shape="poly" coords="305,334,364,292,371,288,377,290,383,287,388,288,411,312,334,367,306,334">
      <area shape="poly" coords="412,311,484,260,452,229,382,278,384,287,410,311">
      <area shape="poly" coords="455,327,511,286,485,260,428,300,456,327">
      <area shape="poly" coords="483,355,540,312,512,286,455,326,482,354">
      <area shape="poly" coords="512,384,569,340,540,312,484,354,512,384">
      <area shape="poly" coords="542,414,598,368,570,340,512,383,542,414">
      <area shape="poly" coords="630,398,598,368,542,412,558,430,564,432,569,434,574,435,578,436,584,434,589,432,628,397,452,228">
      <area shape="poly" coords="598,368,652,327,662,338,668,342,670,347,670,354,670,359,668,365,666,369,628,398,598,367">
      <area shape="poly" coords="598,369,652,327,621,300,570,340,598,368">
      <area shape="poly" coords="539,312,594,273,622,300,570,341,538,311">
      <area shape="poly" coords="540,313,593,273,565,247,513,284,540,312">
      <area shape="poly" coords="514,286,565,247,538,222,486,260,514,285">
      <area shape="poly" coords="452,228,504,190,536,223,485,259,451,228">
      <area shape="poly" coords="568,200,620,165,602,150,596,149,594,144,565,156,534,167,568,200">
      <area shape="poly" coords="596,224,647,188,620,164,568,199,596,222">
      <area shape="poly" coords="625,249,674,211,647,187,596,223,625,249">
      <area shape="poly" coords="654,276,704,237,675,210,624,249,654,276">
      <area shape="poly" coords="684,301,733,263,703,236,653,275,683,300">
      <area shape="poly" coords="733,262,765,289,726,319,720,319,712,320,706,319,701,318,683,300,733,262">
      <area shape="poly" coords="946,253,916,226,878,259,874,265,873,268,873,273,873,278,876,280,878,286,880,290,886,284,890,280,896,282,895,292,892,296,894,298,945,251">
      <area shape="poly" coords="895,298,945,253,978,281,952,304,954,295,954,285,948,288,940,294,935,296,931,304,926,309,926,315,924,324">
      <area shape="poly" coords="964,354,1011,308,978,282,929,326,963,355">
      <area shape="poly" coords="995,380,1045,338,1011,308,963,355,997,378">
      <area shape="poly" coords="1036,411,1081,367,1045,336,996,378,1034,411">
      <area shape="poly" coords="1077,446,1122,400,1080,366,1034,412,1079,446">
      <area shape="poly" coords="996,522,1047,474,1005,439,958,486,996,523">
      <area shape="poly" coords="957,487,1005,440,970,410,919,454,956,487">
      <area shape="poly" coords="920,455,969,410,933,380,884,426,920,454">
      <area shape="poly" coords="884,425,933,380,898,352,849,394,884,425">
      <area shape="poly" coords="848,394,899,351,865,325,816,365,848,393">
      <area shape="poly" coords="786,337,822,308,828,306,834,306,841,307,846,310,866,324,816,365,784,337">
      <area shape="poly" coords="746,371,785,338,817,366,780,396,781,386,778,380,770,381,765,386,760,392,759,400,759,406,750,396,746,392,743,386,744,378,745,369">
      <area shape="poly" coords="796,440,851,394,816,365,764,409,796,440">
      <area shape="poly" coords="798,440,848,394,884,426,833,470,797,439">
      <area shape="poly" coords="869,503,920,456,886,426,832,471,868,504">
      <area shape="poly" coords="868,503,920,455,957,487,929,516,922,516,915,519,913,524,905,528,904,537,866,503">
      <area shape="poly" coords="947,575,996,521,956,486,928,516,934,520,934,526,932,532,927,537,920,537,917,544,912,544,948,574">
      <area shape="poly" coords="861,666,916,608,871,569,819,621,860,665">
      <area shape="poly" coords="818,622,870,568,835,534,779,585,818,621">
      <area shape="poly" coords="745,551,799,500,836,535,780,585,746,550">
      <area shape="poly" coords="711,517,764,470,799,501,745,551,711,517">
      <area shape="poly" coords="676,485,732,438,766,470,710,518,676,484">
      <area shape="poly" coords="646,454,678,485,731,438,716,424,711,422,706,420,702,419,697,418,694,418,690,419,686,421,644,454">
      <area shape="poly" coords="618,535,677,484,645,453,604,490,600,495,600,499,599,502,599,505,600,510,601,516,617,534">
      <area shape="poly" coords="710,518,662,562,661,554,656,551,652,550,648,550,643,557,620,536,678,485">
      <area shape="poly" coords="686,604,744,552,710,517,653,569,686,603">
      <area shape="poly" coords="686,606,745,551,781,588,722,641,686,605">
      <area shape="poly" coords="759,680,818,622,780,586,721,640,758,679">
      <area shape="poly" coords="788,746,861,666,817,622,742,698,787,746">
      <area shape="poly" coords="708,832,789,746,742,699,660,778,708,830">
      <area shape="poly" coords="722,718,686,678,624,736,661,778,722,717">
      <area shape="poly" coords="622,736,685,677,649,639,588,696">
      <area shape="poly" coords="588,696,650,640,614,602,552,657,588,696">
      <area shape="poly" coords="552,658,614,603,582,568,521,620,552,658">
      <area shape="poly" coords="489,586,536,547,542,546,548,546,556,546,562,550,568,554,582,569,522,620,489,587">
      <area shape="poly" coords="449,681,520,620,489,586,440,626,438,631,435,635,432,640,432,646,431,650,432,654,432,659,450,680">
      <area shape="poly" coords="482,721,553,658,520,620,449,680,480,721">
      <area shape="poly" coords="518,762,588,696,553,657,482,720,518,762">
      <area shape="poly" coords="552,803,623,736,586,695,518,762,550,802">
      <area shape="poly" coords="588,846,660,778,623,735,551,802,587,846">
      <area shape="poly" coords="640,906,709,832,659,777,586,846,640,906">
    </map>
  </div>
</div>