Znaczniki na elastycznej mapie

Question

Posiadam element div zawierający mapę dla miasta o żywotności. Potrzebuję umieścić w nim szpilki lub znaczniki, ale moim problemem jest to, że szpilki zmieniają lokalizację na podstawie szerokości okna.

Jak to naprawić, bez względu na rozmiar używanej przeglądarki, szpilki znajdują się w tym samym miejscu na mapie?

<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

Proponuję przy użyciu znacznika obrazu raczej niż obraz tła dla mapy. W ten sposób pojemnik może dostosować swój rozmiar zgodnie z mapą.

Następnie można pozycjonować znaczniki absolutnie z górnymi i lewymi wartościami procentowymi. Pozwoli to markery przenieść z mapą i pozostać w tej samej pozycji jak w poniższym przykładzie:

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>