交互式地图

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元素并显示相关图片的事件。

以下应该是一个好的开始

＆＃13;

＆＃13;

// 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);

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;