互动地图

Question

我一直在尝试创建一个简单的交互式地图，该地图将在图像顶部显示路线。这是我当前的代码：

<div>
    <img src="img/routes1.jpg" width="846" height="503" alt="" usemap="#Map" />
    <map name="Map" id="Map">
        <area alt="" title="" href="img/routes2.gif" shape="rect" coords="300,240,108,88" />
    </map>
</div>

当我点击图片时，我只是想在当前地图上上传路线。有什么帮助吗？

Answer 1

您使用地图的方法是有效的。 现在您需要使用 javascript 来处理点击 area 元素并显示相关图像的事件。

以下应该是一个好的开始

// keep references to the map and the overlay (route) element
var route = document.querySelector('#route'),
    map = document.querySelector('#Map');

// when an area is clicked
map.addEventListener('click', function(e) {
  e.preventDefault(); // cancel the default action of redirecting the browser to the image
  var target = e.target, // extract the actual area element that was clicked
      href = target.href; // and get the relevant value from the href property

  route.src = href; // assign the clicked route image to the overlay element

}, false);

#map-system {
  position: relative;
}

/*
the #route is our overlay element
which gets absolutely positioned so it will fall on top of the map
*/
#route {
  position: absolute;
  left: 0;
  top: 0;
  /*the following line is to allow the mouse to click nodes underneath the visible route*/
  pointer-events: none; 
}

/*the following is to hide the route when no image is assigned to it*/
#route:not([src]) {
  display: none;
}

<div id="map-system">
  <img src="http://i.stack.imgur.com/ZC6H0.jpg" width="846" height="503" alt="" usemap="#Map" />
  <img id="route">
  <!-- added this line to create the overlay item -->
  <map name="Map" id="Map">
    <area alt="" title="" href="http://i.stack.imgur.com/S1Yqe.gif" shape="rect" coords="300,240,108,88" />
  </map>
</div>