我需要在图像映射选定区域上添加文本，

Question

我已经通过https://www.image-map.net/创建了图像映射代码。但是我想将座位号显示为所选座标上的文本，以便用户可以理解并单击给定的坐标。希望我能解决这个问题。请提供解决方案，在此先感谢。

Here is the url

 <img src="https://www.roomsketcher.com/wp-content/uploads/2017/11/RoomSketcher-Office-Floor-Plan-with-Garden-3D-PID3861359.jpg" usemap="#image-map">    
<map name="image-map">
    <area target="_self" alt="seat 1" title="seat 1" href="" coords="49,52,10" shape="circle">
    <area target="_self" alt="seat 2" title="seat 2" href="" coords="95,52,9" shape="circle">
    <area target="_self" alt="seat 3" title="seat 3" href="" coords="69,90,12" shape="circle">
    <area target="_self" alt="seat 4" title="seat 4" href="" coords="161,52,10" shape="circle">
    <area target="_self" alt="seat 5" title="seat 5" href="" coords="203,51,9" shape="circle">
    <area target="_self" alt="seat 6" title="seat 6" href="" coords="179,78,13" shape="circle">
    <area target="_self" alt="seat 7" title="seat 7" href="" coords="251,35,13" shape="circle">
    <area target="_self" alt="seat 8" title="seat 8" href="" coords="301,70,9" shape="circle">
    <area target="_self" alt="seat 9" title="seat 9" href="" coords="282,93,10" shape="circle">
    </map>



.seat1 {
            position: relative;
        }

        .seat1:before {
            position: absolute;
            content: 'seat 1';
            background: red;
            color: #fff;
            width: 45px;
            padding: 2px 5px;
            font-size: 12px;
        }

        img {
            position: relative;
            filter: grayscale(100%);
        }

Answer 1

我建议您将坐标和标签的数据存储在变量或JSON文件中，并使用JavaScript生成<area>和<span>（或其他文本元素）。这样，您就可以使用一组数据来呈现地图和标签。

请考虑以下HTML，并为标签添加div。您的CSS应该为元素提供正确的z-index，以便地图在顶部，标签在下一层，图像在底部。

<img src="" alt="" usemap="#image-map"/>
<map class="js-seating-map" name="image-map">
<div class="js-seating-labels"></div>

在您的变量或JSON中，您可以使用以下示例所示的格式。只要结构合理且可以循环数据，就可以按照自己喜欢的方式进行操作。 （省略号（...）表示有更多数据，仅用于说明目的。）>

const seats = [
  {
    coords: [49, 52],
    radius: 10,
    label: 'Seat 1'
  },
  {
    coords: [95, 52]
    radius: 10,
    label: 'Seat 2'
  },
  ...
];
构建两个函数，一个创建一个<area>元素，另一个创建一个作为标签的<span>。两者都应使用一个席位作为参数。而且一个座位就是坐标和标签等。

const createArea = seat => {
  const area = document.createElement('area');
  area.shape = 'circle';
  area.coords = `${seat.coords.join(', ')}, ${seat.radius}`;
  area.title = seat.label;
  area.alt = seat.label;
  area.target = '_self';
  return area;
};

const createLabel = seat => {
  const label = document.createElement('span');
  label.classList.add('area-label');
  label.style.left = `${seat.coords[0]}px`;
  label.style.top = `${seat.coords[1]}px`;
  label.textContent = seat.label;
  return label;
};
现在循环遍历变量或JSON中的所有座位数据，并为每次迭代构建元素。将它们附加到正确的容器中，您将仅根据所提供的数据来构建动态结构。

const seatingMap = document.querySelector('.js-seating-map');
const seatingLabels = document.querySelector('.js-seating-labels');

for (const seat of seats) {
  const area = createArea(seat);
  const label = createLabel(seat);
  seatingMap.append(area);
  seatingLabels.append(label);
}