设置映射元素的innerHTML

Question

我把头撞在这上面已经有一阵子了。在那时，它是有效的(虽然我可能只是想象)。

这是对带有多边形区域元素的map元素的基本(或假定)使用。地图的area元素应该在其余的文档加载之后添加到映射中。这是用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);
};

这是小提琴。

问题似乎是，在运行innerHTML ()之后，映射的getPoints保持不变。我将map元素的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，因此您的map对象就不再存在了)。

每次执行innerHtml +=时，都需要获取map对象。

如本例所示

或者像这样追加div：

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

使用appendChild的示例

Answer 2

我认为这可以归结为在现代浏览器中图像地图的实现是多么的错误。这是一项相当古老的技术(就HTML语法的使用而言)，而且它已经不再被大量使用了。

据我所知，在chrome中运行了特定的JSFiddle，修改页面中的map元素将导致浏览器创建节点的克隆，并在其上设置内部HTML。您可以看出，因为您正在日志记录的map元素不是DOM树中的同一个map元素。它没有父节点，也没有偏移父节点。

在猜测中，我想说这是铬的故意行为，为了绕开实现渲染器所需的逻辑，使图像映射可以动态编辑。

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