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

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