如何能够单击地图区域并在列表中显示数据？答案

【问题标题】：How to be able to click on a map area and display the data on a list?如何能够单击地图区域并在列表中显示数据？
【发布时间】：2015-10-13 10:51:05
【问题描述】：

我想知道是否可以显示地图区域的数据。例如，在下面的链接中，如果我单击底部的头部区域，它将显示在一个列表中，我在文本中单击了头部。我已经尝试过javascript，但它无法正常工作。

这是示例。

<doctype! html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Body Assesssment</title>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="http://maxcdn.bootdstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/simple-sidebar.css" rel="stylesheet">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.maphilight.min.js"></script>
    <script type="text/javascript"></script>

    <style>

    #page-content-wrapper{
        margin-left:300px;
    }
    h1{
        margin-left:-250px;
    }

</style>
</head>

<body>

<div id="wrapper">
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">

                    </a>
                </li>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">View</a>
                </li>
                <li>
                    <a href="#">Tutorial</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Log Out</a>
                </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->
        <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
 <div id="page-content-wrapper">
 <h1>Step 2: Please mark on these pictures where it is you hurt.</h1>
<img id="themap" src="img/Capture.JPG" alt="" usemap="#Map" />
<map name="Map" id="Map">

    <area ref="#" shape="poly" coords="19,317,45,317,50,334,58,365,55,367,46,367,44,379,35,385,22,378,17,345,4,353,3,341" />
<area class="red" alt="" title="" onclick="" href="#" shape="poly" coords="32,224,18,316,47,317,68,224" />
<area class="red" alt="" title="" onclick="" href="#" shape="poly" coords="45,119,37,137,35,223,67,228,61,159,45,119" />
<area class="red"  alt="" title="" onclick="" href="#" shape="poly" coords="96,297,136,297,128,318,111,320" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="167,216,198,216,212,314,187,315,177,273,169,250" />
<area class="red"  alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="178,109,164,159,168,213,195,213,197,176,191,124,189,115" />
<area id="red"  alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="86,557,110,559,112,622,96,632,75,627" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="144,557,145,591,153,619,129,634,114,623,120,557" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="155,453,157,495,145,558,119,558,118,453" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="92,72,107,88,124,88,137,72,137,90,143,95,119,107,90,95,96,88," />
<area class="red"  alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="90,16,114,5,136,16,145,58,135,74,115,87,96,72,84,60" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="45,119,90,97,118,111,145,97,175,110,165,175,62,175" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="62,180,170,173,165,218,162,243,165,265,142,293,95,294,65, 270,70,245,64,219" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="188,318,208,316,217,324,230,347,222,350,212,342,209,376,193, 380,183,375,183,355,174,364,180,338,184,318" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="67,274,119,340,116,452,79,452,78,433,61,363" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="119,340,167,266,176,314,172,359,157,452,154,453,117,453" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="78,453,77,512,87,557,109,558,115,454" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="369,4,351,17,350,44,360,66,396,66,404,45,407,21,387,4" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="361,66,354,93,377,97,401,92,396,68" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="353,92,307,115,325,173,323,249,374,258,420,249,424,171,442,114,403,92,376,100" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="305,116,298,142,294,219,321,225,323,170" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="444,116,453,219,425,227,420,205,430,139" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="293,219,285,239,280,303,301,309,319,246,319,228" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="426,228,455,222,462,249,464,308,446,310,437,281" />
<area class="red"  alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="322,250,313,305,335,326,361,332,372,325,385,330,404,329,430,315,429,289,421,253,374,258" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="277,308,260,335,280,372,289,373,303,365,307,332,302,310" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="443,312,466,309,485,330,476,358,460,370,442,359" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="312,306,344,331,363,331,373,327,370,436,331,435,319,376" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="375,325,399,330,430,314,428,368,415,407,414,436,376,435,377,400,374,372" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="333,436,366,440,365,453,371,486,366,515,,365,542,342,543,344,535,334,492" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="377,436,414,437,410,452,413,487,400,543,378,543,376,516,374,487,377,456" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="340,545,341,586,335,613,360,633,371,630,366,570,368,545" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="377,546,390,540,401,543,405,553,403,587,410,614,390,633,374,631,372,610,378,565" />

    </map>

</div>
</body>

</html>

http://79.170.44.80/sicuandomain.com/

谢谢！

【问题讨论】：

贴出相关代码，顺便说一句，你的页面全是JS错误
我收到错误Uncaught ReferenceError: myFunction is not defined，因此您需要创建 myFunction 函数来处理点击。
对错误感到抱歉，我忘记编辑之前尝试创建输出的域。但我在上面包含了正确的代码。

标签： javascript html dictionary area

【解决方案1】：

我会轻推你的方向：

从每个 areas 中删除您的内联 onclick=myFunction() 代码。
在areas 中添加您的识别数据。目前，您无法确定哪个是哪个。一种非常简单的方法是将该信息添加到 title 属性中。
在map 上连接一个Javascript click 事件处理程序。通过检查e.target 使用事件委托来找出点击了哪个area。
使用title 属性对这些数据执行您想要执行的操作。

例如：

var map = document.getElementById("Map");
map.addEventListener("click", function(e) {
    callAction(e.target);
});
function callAction(area) {
    alert(area.title);
}

这里有一个小提琴来证明这一点。尝试点击左侧图像上的头部、颈部和左臂或右臂。

小提琴示例：http://jsfiddle.net/abhitalks/qpmxnv2g/

希望对您有所帮助。

【讨论】：