交互式地圖

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>