उत्तरदायी मानचित्र पर मार्कर

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

मैं एक छवि टैग के बजाय नक्शे के लिए एक पृष्ठभूमि छवि का उपयोग कर सुझाव है। इस तरह, कंटेनर मानचित्र के अनुसार अपना आकार अनुकूलित कर सकता है।

फिर, आप मार्करों को शीर्ष और बाएं प्रतिशत मानों के साथ बिल्कुल स्थान दे सकते हैं। `Top` और` छोड़ा 'के लिए

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>