HTML – 响应式地图上的标记

概述我有一个包含一个虚拟城市地图的div. 我需要在其中放置一些引脚或标记,但我的问题是引脚根据窗口宽度改变位置. 如何修复它,无论使用何种浏览器尺寸,引脚都位于地图上的相同位置？ <div class="MapContainer"> <a href="http://www.google.dk" style="position: absolute; top: 240px; left: 650p 我有一个包含一个虚拟城市地图的div.
我需要在其中放置一些引脚或标记,但我的问题是引脚根据窗口宽度改变位置.

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

<div >    <a href="http://www.Google.dk" >        <img  src="~/Content/1453392082_map_pin_fill.png" data-val-text="Bageri" />    </a>    <a href="http://www.Google.dk" >        <img  src="~/Content/1453392082_map_pin_fill.png" data-val-text="Rådhus" />    </a>    <a href="http://www.Google.dk" >        <img  src="~/Content/1453392082_map_pin_fill.png" data-val-text="Nærbrugs" />    </a>    <a href="http://www.Google.dk" >        <img  src="~/Content/1453392082_map_pin_fill.png" data-val-text="Ejendomshandel" />    </a>    <a href="http://www.Google.dk" >        <img  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;}

解决方法 我建议使用图像标签而不是地图的背景图像.这样,容器可以根据地图调整其大小.

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

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 ></span>  <span ></span>     </div>

总结

以上是内存溢出为你收集整理的HTML – 响应式地图上的标记全部内容，希望文章能够帮你解决HTML – 响应式地图上的标记所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。