Question

我有以下代码显示带有绝对定位标记的地图。它运作良好，但我有一个新的要求，以响应屏幕大小的变化（移动优化）。

是否有可能实现这一点，使标记调整到正确的位置，在这种情况下，在阿拉斯加和格陵兰，屏幕调整大小（水平）。

＆＃13;

.map-marker {
    position: absolute;
    font-size: 20px;
    text-shadow: 1px 1px 1px #000;
    text-decoration:none;
  }
  .map-marker span {
    position:relative;
    z-index: 2;
    color:#fff;
  }
  .map-marker:before {
    content: "\f111";
    font-family: 'FontAwesome';
    position: relative;
    right: -14px;
    z-index: 0;
  }
  #one {
    top: 70px;
    left: 20px;
  }

  #two {
    top: 50px;
    left: 260px;
  }

＆＃13;

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="map_container">
  <img src="http://geology.com/world/world-map-clickable.gif" />
  <a href="#" id="one" class="map-marker">
    <span aria-hidden="true">1</span>
  </a>
  <a href="#" id="two" class="map-marker">
    <span aria-hidden="true">2</span>
  </a>
</div>

＆＃13;

Answer 1

你需要做一些事情：

position:relative;display:inline-block;位于.map_container，因此标记上的所有top和left属性都与此包装相关。 display被添加，因此它总是具有其内容的宽度（因此是<img>） - 否则在大型显示器上它将大于图像并且标记将被偏移。如果您想要display:block，请将其包装在<div>。
max-width:100%在<img>元素上，使其在移动设备上缩小到最大可用宽度。
玩一点百分比，直到你做对了。

这是输出：

.map_container {
  position:relative;
  display: inline-block;
}
.map_container img {
  display: block;
  max-width: 100%;
  height: auto;
}
.map-marker {
    position: absolute;
    font-size: 20px;
    text-shadow: 1px 1px 1px #000;
    text-decoration:none;
  }
  .map-marker span {
    position:relative;
    color:#fff;
  }
  .map-marker:before {
    content: "\f111";
    font-family: 'FontAwesome';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #one {
    top: 17%;
    left: 4%;
  }

  #two {
    top: 12%;
    left: 34%;
  }

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="map_container">
  <img src="http://geology.com/world/world-map-clickable.gif" />
  <a href="#" id="one" class="map-marker">
    <span aria-hidden="true">1</span>
  </a>
  <a href="#" id="two" class="map-marker">
    <span aria-hidden="true">2</span>
  </a>
</div>

注意：我也改变了你的引脚居中的方式，因为从中心偏移时，它们似乎在缩放浏览器时在地图上移动。

如何使用标记实现响应式地图图像

1 个答案: