这是故事。我使用图像map（2）为我工作的公司构建了一个地图，您可以在此处查看其当前功能，https://www.absa.co.za/corporate-and-investment-banking/about-us/presence/
我遇到的问题是，在IOS上，地图中的区域不能可点击，实际上，是在IOS上使用Browserstack并选择在图像上方的区域中，我选择图像，而不是区域，因此单击发生在img标签上。现在，您将看到，形状非常复杂，到目前为止，我还没有遇到一种更好的方法，除了。以外，还可以通过其他方式获得相同的期望精度。
注意：该功能可以在Windows，macOS，Android和最受支持的浏览器上正常运行。此问题仅适用于IOS，Chrome和Safari。
我也会在下面发布代码，但是它很脏，因为我正在尝试，到目前为止还算不上运气。
其他信息：
点击地图不会带您到任何地方，而只会影响（桌面）或下方（移动）旁边的元素以显示国家/地区详细信息。
我在地图下方添加了国家/地区名称，以使其在IOS上可用。
我已经在互联网上访问了很多信息以寻找答案，但是很少有地图使用这种功能。
我们将不胜感激。
HTML：
<div class="interactivemap section desktop">
<div style="background: url('/content/dam/south_africa/absa/images/africa/countries/africa.svg') 0px 0px no-repeat; width: 698px; height: 700px;" class="africanMap">
<img id="AfricanOperations" src="/content/dam/south-africa/absa/images/africa/countries/africa.svg" usemap="#AfricanOperations" alt="">
<map id="_AfricanOperations" name="AfricanOperations">
<area shape="poly" alt="Botswana" title="" href="" coords="342,584,342,557,351,557,352,526,374,526,374,528,380,525,387,522,392,526,399,527,403,535,409,541,413,547,422,559,419,565,411,570,404,575,397,583,391,590,384,593,375,588,369,590,364,596,360,600,350,599,349,587,347,585">
<area shape="poly" alt="Zambia" title="" href="" coords="430,497,420,512,403,523,389,522,385,516,371,518,363,511,354,476,426,440,438,439,450,449,465,454,468,465,466,478,464,488">
<area shape="poly" alt="Mozambique" title="" href="" coords="441,603,439,561,432,500,467,490,474,471,500,473,528,463,534,490,514,556,476,588">
<area shape="poly" alt="Mauritius" title="" href="" coords="598,512,633,498,662,509,681,544,646,567,611,558,599,539">
<area shape="poly" alt="Seychelles" title="" href="" coords="612,439,603,395,631,327,682,363,688,456">
<area shape="poly" alt="Tanzania" title="" href="" coords="436,435,412,433,408,413,409,389,436,381,443,378,464,378,470,377,500,396,501,402,517,412,529,426,529,441,529,460,499,471,474,469,469,454,450,446">
<area shape="poly" alt="Uganda" title="" href="" coords="434,380,413,384,411,361,414,330,444,322,470,331,475,335,479,342,480,356,468,371,465,376,441,377">
<area shape="poly" alt="Namibia" title="" href="" coords="339,613,334,617,323,617,317,611,309,615,295,616,249,497,367,518,384,519,383,521,350,523,348,553,339,556">
<area shape="poly" alt="Nigeria" title="" href="" coords="189,333,186,233,303,230,315,253,275,346">
<area shape="poly" alt="South-africa" title="" href="" coords="294,618,311,617,317,614,323,619,335,618,342,615,341,587,347,588,349,601,361,601,371,592,378,591,382,595,391,592,405,578,416,569,425,559,437,563,438,594,439,604,450,604,469,608,464,663,423,682,308,687">
<area shape="poly" alt="Kenya" title="" href="" coords="471,373,482,357,482,342,469,328,468,311,502,305,553,308,578,360,545,427,503,401,502,394">
<area shape="poly" alt="Ghana" title="" href="" coords="183,232,116,260,118,345,185,348">
</map>
<map id="_AfricanOperationsMobile" name="AfricanOperationsMobile">
<area shape="poly" alt="Botswana" title="" href="" coords="166,236,161,241,161,255,157,255,156,267,160,273,165,276,171,270,178,271,194,257,197,257,196,245">
<area shape="poly" alt="Zambia" title="" href="" coords="213,214,211,207,202,204,197,196,162,213,167,236,197,244,196,229,209,222">
<area shape="poly" alt="Mozambique" title="" href="" coords="215,216,209,224,197,229,200,257,201,275,213,274,238,249,250,209,230,217">
<area shape="poly" alt="Mauritius" title="" href="" coords="266,238,289,225,311,235,313,256,292,266,273,256">
<area shape="poly" alt="Seychelles" title="" href="" coords="268,179,288,154,319,165,319,200,284,208">
<area shape="poly" alt="Tanzania" title="" href="" coords="216,174,228,182,235,190,250,189,251,209,241,212,229,216,215,216,213,208,203,204,193,184,193,174">
<area shape="poly" alt="Uganda" title="" href="" coords="215,173,220,163,215,151,199,142,183,156,193,174">
<area shape="poly" alt="Namibia" title="" href="" coords="165,235,115,228,131,284,155,283,156,255">
<area shape="poly" alt="Nigeria" title="" href="" coords="84,111,115,97,152,115,151,146,126,165,89,155">
<area shape="poly" alt="South-africa" title="" href="" coords="156,284,156,269,159,274,164,278,171,271,178,272,194,258,198,258,200,276,220,275,213,297,190,320,136,320,116,285">
<area shape="poly" alt="Kenya" title="" href="" coords="221,163,215,149,232,139,257,148,256,190,236,189,229,181,216,172">
<area shape="poly" alt="Ghana" title="" href="" coords="88,155,83,111,48,108,45,155">
</map>
<div class="bc-textimage-height"> </div>
<div class="bc-clear"></div>
</div>
</div>
脚本：
function goDesktop() {
if ($(window).width() < 768) {
this.img.attr('usemap', 'AfricanOperationsMobile');
this.container.css({'width': '320px', 'height': '321px'});
}
var ua = navigator.userAgent,
pickclick = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";
if(scope.length !== 0){
var _path = $('#AfricanOperations').attr('src'),
_imgLoc = _path.split('africa.')[0];
$('.africanMap').css('background', 'url(' + _path + ') no-repeat 0 0');
$('body').append('<div class=\'hovertool\'></div>');
$('.hovertool').css('display', 'none');
$('#_AfricanOperations').on(pickclick, 'area', function(e) {
e.preventDefault();
e.stopPropagation();
var _alt = $(this).attr('alt'),
_counter = 0,
_adCounter,
_country = _alt.toLowerCase();
_country = _country.replace(' ', '-');
$('.africanMap img').attr('src', _imgLoc + 'over_' + _country + '.svg');
$('.tabs-map-description .tabs-nav-item').each(function() {
var _countryHead = $(this).find('.text-wrapper').html();
_counter = _counter + 1;
_adCounter = _counter + 1;
_countryHead = _countryHead.toLowerCase();
_countryHead = _countryHead.replace(' ', '-');
if (_country == _countryHead) {
var _targetNav = $('.tabs-map-description .tabs-nav-item:nth-child(' + _counter + ')');
var _targetCon = $('.tabs-map-description .tabs-content:nth-child(' + _adCounter + ')');
_targetNav.addClass('is-active');
_targetNav.siblings('.tabs-nav-item').removeClass('is-active');
_targetCon.removeClass('is-hidden');
_targetCon.siblings('.tabs-content').addClass('is-hidden');
}
});
});
$('#_AfricanOperations area').hover(function(e){
e.preventDefault();
e.stopPropagation();
$('.hovertool').html($(e.target).attr('alt'));
$('.hovertool').css('display', 'block');
},function(e){
$('.hovertool').html('');
$('.hovertool').css('display', 'none');
});
$("body").mousemove(function(e) {
var x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
$('.hovertool').css('top', y + 'px');
$('.hovertool').css('left', (x + 20) + 'px');
});
$('#_AfricanOperationsMobile').on(pickclick, 'area', function(e){
e.preventDefault();
e.stopPropagation();
var _alt = $(this).attr('alt'),
_counter = 0,
_adCounter,
_country = _alt.toLowerCase();
_country = _country.replace(' ', '-');
$('.africanMap img').attr('src', _imgLoc + 'over_' + _country + '.svg');
$('.tabs-map-description .tabs-nav-item').each(function() {
var _countryHead = $(this).find('.text-wrapper').html();
_counter = _counter + 1;
_adCounter = _counter + 1;
_countryHead = _countryHead.toLowerCase();
_countryHead = _countryHead.replace(' ', '-');
if (_country == _countryHead) {
var _targetNav = $('.tabs-map-description .tabs-nav-item:nth-child(' + _counter + ')');
var _targetCon = $('.tabs-map-description .tabs-content:nth-child(' + _adCounter + ')');
_targetNav.addClass('is-active');
_targetNav.siblings('.tabs-nav-item').removeClass('is-active');
_targetCon.removeClass('is-hidden');
_targetCon.siblings('.tabs-content').addClass('is-hidden');
}
});
});
}
};
this.scope = $('.interactivemap');
this.container = this.scope.find('.africanMap');
this.img = this.container.find('#AfricanOperations');
this.goDesktop(this.scope);
CSS：
.reference-africa-map {
width: 698px;
width: 43.624875rem;
display: block;
float: left;
margin-left: calc((100% - 1058px)/ 2);
cursor: pointer;
}
@media only screen and (max-width:767px) {
.africanMap {
max-width: 320px;
}
}
.reference-africa-map .map {
width: auto !important;
position: absolute;
top: 0;
left: 0;
margin-left: -9px;
margin-top: -40px;
cursor: pointer;
display: inline-block;
}
.reference-africa-map area {
outline: 0;
cursor: pointer;
}
@media (max-width:1060px) {
.reference-africa-map {
margin-left: calc((100vw - 698px)/ 2)
}
}
@media only screen and (max-width:767px) {
.reference-africa-map {
margin-left: calc((100vw - 320px)/ 2);
max-width: fit-content
}
}
.tabs-map-description {
width: 360px;
width: 22.49975rem;
margin-top: 6.2496875rem;
display: inline-block !important
}
@media only screen and (min-width:768px) {
.tabs-map-description .tabs-nav {
display: none;
}
}
.tabs-map-description .tabs-nav {
overflow-x: scroll;
position: static;
}
.tabs-map-description ::-webkit-scrollbar {
display: none;
}
.tabs-map-description .tabs-nav-switcher {
background: white;
border: 0;
-webkit-box-shadow: 0px 0px 68px 34px rgba(255,255,255,1);
-moz-box-shadow: 0px 0px 68px 34px rgba(255,255,255,1);
box-shadow: 0px 0px 68px 34px rgba(255,255,255,1);
-webkit-animation: ArrowAnimation 1s infinite; /* Safari 4+ */
-moz-animation: ArrowAnimation 1s infinite; /* Fx 5+ */
-o-animation: ArrowAnimation 1s infinite; /* Opera 12+ */
animation: ArrowAnimation 1s infinite; /* IE 10+, Fx 29+ */
transition: all .5s ease;
}
@-webkit-keyframes ArrowAnimation {
0% { padding-right: 0px;
padding-left: 0px;}
50% { padding-right: 5px;
padding-left: 5px;}
100% { padding-right: 0px;
padding-left: 0px;}
}
@-moz-keyframes ArrowAnimation {
0% { padding-right: 0px;
padding-left: 0px;}
50% { padding-right: 5px;
padding-left: 5px;}
100% { padding-right: 0px;
padding-left: 0px;}
}
@-o-keyframes ArrowAnimation {
0% { padding-right: 0px;
padding-left: 0px;}
50% { padding-right: 5px;
padding-left: 5px;}
100% { padding-right: 0px;
padding-left: 0px;}
}
@keyframes ArrowAnimation {
0% { padding-right: 0px;
padding-left: 0px;}
50% { padding-right: 5px;
padding-left: 5px;}
100% { padding-right: 0px;
padding-left: 0px;}
}
.tabs-map-description .tabs-nav-switcher:before {
color: #BE0028;
padding: 12px 0px;
}
.tabs-map-description .tabs-nav .text-wrapper {
font-size: 18px;
color: black !important;
}
.tabs-map-description .tabs-nav-list {
width: max-content;
}
.tabs-map-description .tabs-nav .tabs-nav-item {
border: 0;
background: white;
}
.tabs-map-description .tabs-nav .tabs-nav-item.is-active .text-wrapper {
color: #BE0028 !important;
}
.tabs-map-description .tabs-content {
border: 0
}
.tabs-map-description .tabs-content .h3,
.tabs-map-description .tabs-content .pseudo-h3,
.tabs-map-description .tabs-content h3 {
line-height: 95px;
line-height: 5.9373125rem;
font-size: 48px;
font-size: 2.9999375rem;
font-family: SourceSansPro-Black, Arial, Helvetica, sans-serif;
letter-spacing: .44px;
border-bottom: 1px solid #BE0028
}
.tabs-map-description .tabs-content p,
.tabs-map-description .tabs-content p a {
font-size: 16px;
font-size: .9996875rem;
line-height: 28px;
line-height: 1.75rem;
letter-spacing: .5px
}
.tabs-map-description .tabs-content p .read-more-arrow,
.tabs-map-description .tabs-content p a .read-more-arrow {
letter-spacing: 2px
}
@media (max-width:1060px) {
.tabs-map-description {
margin-top: 0;
margin-left: calc((100vw - 360px)/ 2)
}
}
.hovertool {
position: absolute;
width: 100px;
padding: 10px;
text-align: center;
border-radius: 2px;
background: white;
z-index: 1000;
border: 1px solid #BE0028;
}
答案 0 :(得分：0)
问题出在HTML中。它没有像其他浏览器那样处理它，因此我不得不将每个地图移到它的唯一父div。