为地图元素设置innerHTML

Question

我一直在这一段时间里对此感兴趣。在开始时它正在工作（尽管我可能只是想象它）。

这是一个基本的（或应该使用）具有多边形区域元素的贴图元素。在加载文档的其余部分后，地图的区域元素应该添加到地图中。这是通过javascript完成的，因此可以很容易地改变区域的数量（圆的楔形）以及圆的半径。

//test.html body (points.js is included in head) 

<img src="http://www.placehold.it/600x600" usemap="#graphMap"> 
<map name="graphMap"></map> 
<script> 
    getPoints(); 
</script> 

//points.js 

function getX(radius, angle, num) { 
    return Math.round(radius * Math.sin(angle * (i) * Math.PI/180) + 298); 
}; 

function getY(radius, angle, num) { 
    return Math.round(radius * Math.cos(angle * (i) * Math.PI/180) + 298); 
}; 

function changePointColor(index) { 
    var points = document.getElementsByClassName('point'); 

    var style = points[index].getAttribute("style"); 
    style = style + 'background-color:green;'; 
    points[index].setAttribute("style", style); 
}; 

function getPoints() { 
    var wedges = 12.0; 
    var radius = 300.0; 
    var angle = 360.0/wedges; 

    var body = document.getElementsByTagName('body')[0]; 
    var map = document.getElementsByName('graphMap')[0]; 

    var out_points = []; 
    var in_points = []; 

    for (i = 0; i < wedges; i++) { 
    out_points.push(
     [ 
      getX((radius + 10), angle, i), 
      getY((radius + 10), angle, i) 
     ] 
     ); 

    in_points.push(
     [ 
      getX((radius - 100), angle, i), 
      getY((radius - 100), angle, i) 
     ] 
     ); 
    } 

    for (i = 0; i < wedges; i++) { (function(i) { 
    body.innerHTML += '<div class="point" style="top:' + out_points[i][1] + 'px;left:' + out_points[i][0] + 'px;background-color:blue;"></div>'; 
    body.innerHTML += '<div class="point" style="top:' + in_points[i][1] + 'px;left:' + in_points[i][0] + 'px;background-color:blue;"></div>'; 
    var mapHTML = '<area shape="poly" coords="'; 
    mapHTML += out_points[i].join() + ','; 
    mapHTML += out_points[(i+1) % wedges].join() + ','; 
    mapHTML += in_points[(i+1) % wedges].join() + ','; 
    mapHTML += in_points[i].join() + '" href="#" '; 
    mapHTML += 'alt="wedge' + i + '" title="wedge' + i + '"' 
    mapHTML += ' onclick="changePointColor(' + i + ')"' 
    mapHTML += '>' + "\n"; 
    map.innerHTML += mapHTML; 
    })(i);} 

    console.log(map) 
    console.log(map.innerHTML); 
}; 

这里是the fiddle。

问题似乎是getPoints（）运行后map的innerHTML保持不变。我登录的地图元素的innerHTML在getPoints（结束）功能：

// console.log(map.innerHTML) output 

<area shape="poly" coords="298,608,453,566,398,471,298,498" href="#" alt="wedge0" title="wedge0" onclick="changePointColor(0)"> 
<area shape="poly" coords="453,566,566,453,471,398,398,471" href="#" alt="wedge1" title="wedge1" onclick="changePointColor(1)"> 
<area shape="poly" coords="566,453,608,298,498,298,471,398" href="#" alt="wedge2" title="wedge2" onclick="changePointColor(2)"> 
<area shape="poly" coords="608,298,566,143,471,198,498,298" href="#" alt="wedge3" title="wedge3" onclick="changePointColor(3)"> 
<area shape="poly" coords="566,143,453,30,398,125,471,198" href="#" alt="wedge4" title="wedge4" onclick="changePointColor(4)"> 
<area shape="poly" coords="453,30,298,-12,298,98,398,125" href="#" alt="wedge5" title="wedge5" onclick="changePointColor(5)"> 
<area shape="poly" coords="298,-12,143,30,198,125,298,98" href="#" alt="wedge6" title="wedge6" onclick="changePointColor(6)"> 
<area shape="poly" coords="143,30,30,143,125,198,198,125" href="#" alt="wedge7" title="wedge7" onclick="changePointColor(7)"> 
<area shape="poly" coords="30,143,-12,298,98,298,125,198" href="#" alt="wedge8" title="wedge8" onclick="changePointColor(8)"> 
<area shape="poly" coords="-12,298,30,453,125,398,98,298" href="#" alt="wedge9" title="wedge9" onclick="changePointColor(9)"> 
<area shape="poly" coords="30,453,143,566,198,471,125,398" href="#" alt="wedge10" title="wedge10" onclick="changePointColor(10)"> 
<area shape="poly" coords="143,566,298,608,298,498,198,471" href="#" alt="wedge11" title="wedge11" onclick="changePointColor(11)"> 

真的在我的智慧在这一个结束。我想我已经做了一个明显的JavaScript或HTML错误。期待学习我的错误。

Answer 1

当您使用innerHtml将html附加到主体时，它正在重写html，因此您获取的地图对象不再存在，这就是为什么地图区域未被追加的原因。 （它已被新的html覆盖 - + =意味着它获取当前的html添加新的html，然后用它创建的新html覆盖现有的html，因此您的地图对象不再存在）。

你要么需要获取地图每次都反对你做的innerHtml +=

like in this example

或追加这样的div：

var elem = document.createElement('div'); 
//add attributes and styles to div here 
body.appendChild(elem); 

Example using appendChild

Answer 2

我认为这取决于现代浏览器中图像映射的实现方式。这是一个相当古老的技术（就HTML语法而言），而且它的用处不大。

从我可以告诉在Chrome中运行该特定的JSFiddle，修改页面中的map元素导致浏览器创建该节点的克隆，并在其上设置内部HTML。您可以知道，因为您记录的map元素与DOM树中的元素不是相同的map。它没有父节点，也没有偏移父节点。

在猜测，我会说这是铬的故意行为，以避免必须实现呈现器中所需的逻辑，使图像映射动态可编辑。

不幸的是，解决方案可能是尝试手动复制图像映射的行为，透明div也许。