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保持不变。我在getPoints（）函数的末尾记录了map元素的innerHTML：

// 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

我认为这归结为现代浏览器中图像映射的实现有多么糟糕。这是一项相当古老的技术（就HTML语法的生命周期而言），它已经不再使用了很多。

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

猜测一下，我说这是Chrome中的故意行为，以便必须实现渲染器中所需的逻辑，以使图像映射动态可编辑。

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

Answer 2

当您使用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

为map元素设置innerHTML

2 个答案: