Question

我有一张世界地图图片（png图片），现在我打算在地图上为纽约，旧金山，伦敦，tokya，孟买等各个城市添加标记。标记将像红点一样我在我的应用程序中有这个图像，我最终想要的是这些标记应该有一个关联的onclick javascript函数，如loadstasticschart(cityname).
因此，一旦点击标记，该城市的图形图表就会加载到页面中的相邻div中所以基本上我想要的是一种方法来关联地图中城市点的javascript功能。我该如何实现此功能？

修改：我确实想到了用户图像地图的方式并拥有<area>标签，并在这些区域标签上设置了onclick事件。 are标签具有定义可点击区域的坐标属性。现在剩下的最后一件事就是用一些颜色为各个区域标签着色，因为现在地图中不可见。我看到一个帖子，他们建议将id设置为区域标签，并通过document.getElementbyId设置id的颜色，因为样式标签更改为背景颜色或任何东西都没有使区域可见。

此致 Priyank

Answer 1

我有两个小建议，一个是避免使用区域标记并在图像上方放置一个canvas标记，并使用Paper.js在其上绘制并关联每个绘制一个onclick事件。如果您想要在旧浏览器中使用的东西，我建议使用Raphael.js。

无论如何......如果您仍然想要使用区域标记，您可以使用一个小的dot.png图像并将其作为背景添加到区域标记中，并更改每个国家/地区区域标记的位置，即：

.area {
  background: url("../images/dot.png") no-repeat;
}
.area#poland {
  background-position: 100px 150px;
}
.area#argentina {
  background-position: -100px -300px;
}

我希望它有所帮助，欢呼。

--------------------------- EDIT ------------------- ------------

好的，这里有一个可行的解决方案：http://jsfiddle.net/8gDLV/1/

html：

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
  </head>
  <body>
    <div id="map-container">
      <img src="http://www.theodora.com/maps/new4/world_color.gif"/>
      <div id="tucuman" class="location"></div>
      <div id="buenosaires" class="location"></div>
      <div id="paris" class="location"></div>
    </div>
  </body>
</html>

的main.css：

#map-container {
  width: 648px;
  height: 413px;
  border: 1px solid black;
  position: relative;
}
#map-container .location {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: red;
  cursor: pointer;
}
#map-container .location.active {
  background: yellow;
}
#map-container .location#tucuman {
  top: 337px;
  left: 126px;
}
#map-container .location#buenosaires {
  top: 350px;
  left: 130px;
}
#map-container .location#paris {
  top: 139px;
  left: 264px;
}

main.js：

$(document).ready(function () {
  $(".location").click(function() {
    if (!$(this).hasClass(".active")) {
      $(".location.active").removeClass("active");
      $(this).addClass("active")
    }
  });
});

我希望它很清楚，现在我没有时间更好地解释它，但是如果你有任何疑问请问它，我会稍后编辑。

干杯!!

javascript onclick图像点上的事件

1 个答案: