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

Question

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

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

.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;
  }

<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>

Answer 1

你需要一些东西：

• position:relative;display:inline-block;on .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>

注意：我还改变了您将图钉居中的方式，因为它们偏离中心，在缩放浏览器时似乎在地图上移动。