Javascript 为映射元素设置innerHTML

我已经在这上面敲了一段时间了。在这一点上，它是有效的（尽管我可能只是想象它）

这是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);
};

//test.html正文（head中包含points.js）
getPoints（）；
//points.js
函数getX（半径、角度、数值）{
返回数学圆（半径*数学sin（角度*（i）*数学PI/180）+298）；
};
函数getY（半径、角度、数值）{
返回数学圆（半径*数学cos（角度*（i）*数学PI/180）+298）；
};
函数changePointColor（索引）{
var points=document.getElementsByClassName（'point'）；
var style=points[index].getAttribute（“style”）；
样式=样式+'背景色：绿色；'；
点[index].setAttribute（“样式”，样式）；
};
函数getPoints（）{
var楔形=12.0；
var半径=300.0；
可变角度=360.0/楔形；
var body=document.getElementsByTagName（'body'）[0]；
var map=document.getElementsByName（'graphMap'）[0]；
var out_points=[]；
风险值（单位：点）=[]；
对于（i=0；i

---

谢谢！我甚至都没想到会发生这样的事情。不过我认为map非常好，至少在这种情况下它非常有用。我只是创建了整个map元素，然后将其作为子元素附加到身体上，从而绕过了克隆问题。@jphager2这是怎么回事？完全错了-图map仍然是HTML5的一部分，所以所有现代浏览器都可以使用它们-啊，公平点，Pete是对的，原始的

map

元素不再在DOM树中，因为内部HTML被覆盖，与图像映射不兼容无关。如果可能的话，可能需要更改接受的答案。这似乎很奇怪hough，因为即使div覆盖了地图，为什么不应该将area元素添加到地图的innerHTML中呢？可能是注释了点的东西让这起作用了..不确定。p.s.注意到了id。我在地图上看到的大多数文档似乎都很旧。。