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

Question

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

 <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。这样您就有了一组可用于呈现地图和标签的数据。

将您的 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);
}

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

I need to add text on image mapping selected area,

javascript

imagemap