html - 响应式 map 上的标记

Question

我有一个包含虚拟城市 map 的 div。我需要在其中放置一些图钉或标记，但我的问题是图钉会根据窗口宽度改变位置。

如何解决这个问题，无论使用何种尺寸的浏览器，图钉都位于 map 上的同一位置？

<div class="MapContainer">
    <a href="http://www.google.dk" style="position: absolute; top: 240px; left: 650px;">
        <img class="pin" src="~/Content/1453392082_map_pin_fill.png" data-val-text="Bageri" />
    </a>
    <a href="http://www.google.dk" style="position: absolute; top: 258px; left: 670px;">
        <img class="pin" src="~/Content/1453392082_map_pin_fill.png" data-val-text="Rådhus" />
    </a>
    <a href="http://www.google.dk" style="position: absolute; top: 258px; left: 670px;">
        <img class="pin" src="~/Content/1453392082_map_pin_fill.png" data-val-text="Nærbrugs" />
    </a>
    <a href="http://www.google.dk" style="position: absolute; top: 258px; left: 670px;">
        <img class="pin" src="~/Content/1453392082_map_pin_fill.png" data-val-text="Ejendomshandel" />
    </a>
    <a href="http://www.google.dk" style="position: absolute; top: 258px; left: 670px;">
        <img class="pin" src="~/Content/1453392082_map_pin_fill.png" data-val-text="Avis" />
    </a>
</div>

.MapContainer {
    background-image: url('../Content/bastumhuhej2.png');
    position: relative;
    background-size: contain;
    height: 100vh;
    background-repeat: no-repeat;
}

Answer 1

我建议为 map 使用图像标签而不是背景图像。这样，容器就可以根据 map 调整其大小。

然后，您可以使用 top 和 left 百分比值绝对定位标记。这将允许标记随 map 移动并保持在同一位置，如下例所示:

div{
  position:relative;
}
img{
  display:block;
  width:100%;
}
.marker{
  position:absolute;
  width:10px;height:10px;
  border-radius:50%;
  background:red;
}
.marker:nth-child(2){
  left:21%;
  top:30%;
}
.marker:nth-child(3){
  left:58%;
  top:60%;
}

<div>
  <img src="http://i.imgur.com/xUBZg0y.png" />
  <span class="marker"></span>
  <span class="marker"></span>     
</div>