html中map标签和area标签的应用 且能自适应不同手机的屏幕

一、如何使用

带有可点击区域的图像映射：

注意：

 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。

可选属性：

coords:定义可点击区域（对鼠标敏感的区域）的坐标。

href:定义此区域的目标 URL。

shape:定义区域的形状。

target:规定在何处打开 href 属性指定的目标 URL。

二、自适应不同手机

如果要做到自适应，就需要根据屏幕的宽度改变coords的坐标值。

$("#planetmap").append('')

    //坐标转换
    function adjust (coords) {
      var pageWidth = document.body.clientWidth;//获取页面宽度
      var each = coords.split(",");
      //获取每个坐标点
      for (var i = 0; i < each.length; i++) {
          each[i] = Math.round(parseInt(each[i]) * pageWidth / 320).toString();
      }
      //生成新的坐标点
      var newPosition = "";
      for (var i = 0; i < each.length; i++) {
          newPosition += each[i];
          if (i < each.length - 1) {
              newPosition += ",";
          }
      }
      return newPosition;
    }

之前上传坐标数据的时候 以苹果5为标准，所以这里按照宽度320为比例计算