javascript - 为 map 元素设置innerHTML

Question

我已经为这个问题苦苦挣扎了一段时间了。此时它正在工作(尽管我可能只是想象它)。

这是 map 元素与多边形区域元素的基本(或应该是)用法。 map 的区域元素应在文档的其余部分加载后添加到 map 中。这是使用 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

当您使用 innerHtml 将 html 附加到正文时，它会重写 html，因此您获得的 map 对象不再存在，这就是不附加 map 区域的原因。 (它已被新的 html 覆盖 - += 意味着它获取当前的 html 添加您的新 html，然后用它创建的新 html 覆盖现有的 html，因此您的 map 对象不再存在)。

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

like in this example

或者像这样附加div:

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

Example using appendChild