Question

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

如何修复它，无论使用何种浏览器尺寸，引脚都位于地图上的相同位置？

<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

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

然后，您可以使用顶部和左侧百分比值绝对定位标记。这将允许标记随地图移动并保持在相同位置，如下例所示：

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>

响应地图上的标记

1 个答案: