我有关于地图调整大小的问题。我们使用区域坐标制作地图。当我调整地图大小以适当调整大小时，调整地图图像的大小不会在我刷新页面时调整大小以便调整大小。
下面显示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是坐标调整大小。
请帮忙！
答案 0 :(得分：1)
似乎工作得很好：
（注意图片中的课程@Repository
public class JdbcMessageDAO implements MessageDAO
{
private static final String SELECT_STATEMENT = "SELECT id, name, message FROM MESSAGES WHERE id=?";
private static final String SELECT_ALL_STATEMENT = "SELECT id, name, message FROM MESSAGES";
private final JdbcTemplate jdbcTemplate;
@Autowired
public JdbcMessageDAO(DataSource dataSource)
{
jdbcTemplate = new JdbcTemplate(dataSource);
}
/*...*/
}
）
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();
});
});
});