css 如何在网站上制作带有地标的Map?[关闭]

1l5u6lss  于 2023-05-08  发布在  其他
关注(0)|答案(1)|浏览(123)

已关闭,此问题需要更focused。目前不接受答复。
**想改善这个问题吗?**更新问题,使其仅通过editing this post关注一个问题。

2天前关闭。
Improve this question
我想在我的网站上做一个Map(我已经有一个光栅图形)。我想把可见的,绿色的圆点(圆圈),旁边,当悬停在,一个程式化的工具提示与其他信息将显示。
但是怎么做呢?如果我使用map html标签,我就不能在Map上显示可见的点。
另一个问题是网站的响应性-点的位置沿着页面的大小而改变。它们相对于Map应该是静止的。

ycl3bljg

ycl3bljg1#

你可以这样做--不要使用图像Map,而是“发明”自己的坐标系,其中x和y是图像宽度和高度的百分比。当图像加载完毕,并且每次调整视口大小时(如果图像具有动态宽度)-在Map上放置点,当您悬停这些点时,显示您的工具提示/文本...

// x and y coordinates in percentages (0-100)
let points = [
  { x: 10, y: 18, text: 'Room 1' },
  { x: 28, y: 18, text: 'Hallway' },
  { x: 55, y: 18, text: 'Room 2' },
  { x: 80, y: 22, text: 'Bathroom' },
  { x: 80, y: 72, text: 'Room 3' }
];

let mapEl = document.querySelector('.map');
let img = mapEl.querySelector('img');
let orgHtml = mapEl.innerHTML;

function placePoints() {
  let w = mapEl.offsetWidth, h = mapEl.offsetHeight;
  let html = '';
  for (let { x, y, text } of points) {
    html += `<div class="point" style="left:${w * (x / 100)}px`
      +`;top:${h * (y / 100)}px"><div>${text}</div></div>`
  }
  mapEl.innerHTML = orgHtml + html;
}

img.onload = placePoints;
window.addEventListener('resize', placePoints);
.map {
  width: 50%;
  position: relative;
}

.map img {
  width: 100%;
}

.point {
  width: 3vw;
  height: 3vw;
  background-color: green;
  border-radius: 50%;
  position: absolute;
}

.point div {
  position: relative;
  z-index: 1;
  margin: -3vw 0 0 3vw;
  width: 100px;
  background-color: yellow;
  border-radius: 10px;
  font-family: Verdana;
  padding: 10px;
  text-align: center;
  display: none;
}

.point:hover div {
  display: block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Map</title>
</head>

<body>
  <div class="map">
    <img alt="A map of the apartment"
      src="https://i.stack.imgur.com/GcQ61.jpg">
  </div>
</body>

</html>

相关问题