Indicatori sulla mappa reattiva

Question

Ho un div che contiene una mappa per una città virtuale. Ho bisogno di inserire alcuni pin o marker, ma il mio problema è che i pin cambiano posizione in base alla larghezza della finestra.

Come può essere risolto in modo che, indipendentemente dalle dimensioni del browser utilizzato, i pin si trovino nello stesso punto sulla mappa?

<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

Io suggerirei di usare un tag di immagine piuttosto che background-image per la mappa a. In questo modo, il contenitore può adattare le sue dimensioni in base alla mappa.

Quindi, è possibile posizionare i marcatori in modo assoluto con i valori percentuali superiore e sinistro. Ciò consentirà alle marcatori di muoversi con la mappa e rimanere nella stessa posizione, come nel seguente esempio:

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>