Điểm đánh dấu trên bản đồ phản hồi

Question

Tôi có một div chứa bản đồ cho một thành phố đầy sức sống. Tôi cần phải đặt một số ghim hoặc điểm đánh dấu trong đó, nhưng vấn đề của tôi là các chân thay đổi vị trí dựa trên chiều rộng cửa sổ.

Làm cách nào để khắc phục sự cố cho dù kích thước trình duyệt được sử dụng, các chân nằm ở cùng một vị trí trên bản đồ?

<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

tôi sẽ đề nghị sử dụng một thẻ hình ảnh chứ không phải là một background-image cho bản đồ. Bằng cách này, các container có thể thích ứng với kích thước của nó theo bản đồ.

Sau đó, bạn có thể định vị các điểm đánh dấu hoàn toàn bằng các giá trị phần trăm trên cùng và bên trái. Điều này sẽ cho phép các đánh dấu để di chuyển với bản đồ và giữ vị trí tương đương như trong ví dụ sau:

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>