Question

我正在jQuery中创建一个交互式地图，并使用自定义手绘地图。我在整个地图上放置了一系列“触发点”，相对于地图的大小绝对定位。当使用悬停在这些触发点上时，会显示工具提示，其中包含有关位置的信息。

HTML / CSS：

<div id="map" style="position:relative; background: url(images/map.jpg">
    <div class="trigger" data-loc="locationA" style="position:absolute; left:10px; top:3px"><h1 class="tooltip">Location A Title</h1></div>
    <div class="trigger" data-loc="locationB" style="position:absolute; left:0px; top:24px"><h1 class="tooltip">Location B Title</h1></div>
    <div class="trigger" data-loc="locationC" style="position:absolute; left:140px; top:35px"><h1 class="tooltip">Location C Title</h1></div>
    <div class="trigger" data-loc="locationD" style="position:absolute; left:70px; top:103px"><h1 class="tooltip">Location D Title</h1></div>
</div>

JQuery的：

$(".trigger").hover(function(){
   $(this).find(".tooltip").fadeIn();
}, function(){
   $(this).find(".tooltip").fadeOut();
});

几个问题：
1）这是使用JQuery进行基本交互式地图的最佳方式吗？

2）我想在右边有一个位置列表。当用户点击链接时，它也应该触发该相关链接的工具提示。如上所示，每个触发点都有一个data-loc属性。如果我在右侧的锚链接中设置相同的数据点，我将如何使用jQuery链接它们并触发相关工具提示的淡入淡出？

Answer 1

据我所知，没有最好的方式来做到这一点。一种稍微更具描述性的方式是use the area tag而不是div。

<!DOCTYPE >
<html>
<body>
  <img src="image/all balls.jpg" style="width: 450px; height: 450px;" 
       alt="Balls" usemap="#BallMap" />
  <map name="BallMap">
    <area id="whiteArea" class="hoverArea" shape="circle" coords="78,81,76.5" 
          nohref="nohref" alt="white" />
    <area id="blueArea" class="hoverArea" shape="circle" coords="260,81,76.5" 
          nohref="nohref" alt="blue" />
    <area id="redArea" class="hoverArea" shape="circle" coords="84,254,76.5"
          nohref="nohref" alt="red" />
  </map>
</body>
</html>

然后同样：

$(".hoverArea").hover(function(){
   showToolTip($(this));
}, function(){
   hideToolTip($(this));
});

编写用于显示工具提示的自定义函数可能需要多做一些工作。（注意：我自己从未使用过Area。）

<强>更新

有几种方法可以实现这一目标。

一种半hacky方式，因为你已经在使用绝对值，就是在当前div之间加上另一个div，但是让它们绝对定位在右边。 Hacky但是很有效。

我不会这样做，因为在我看来这会更好：

<div id="map" style="position:relative; background: url(images/map.jpg">
  <div class="trigger" data-loc="locationA" id="locationA"
       style="position:absolute; left:10px; top:3px">
    <h1 class="tooltip">Location A Title</h1>
  </div>
  <div class="trigger" data-loc="locationB" id="locationB" 
       style="position:absolute; left:0px; top:24px">
    <h1 class="tooltip">Location B Title</h1>
  </div>
  <div class="trigger" data-loc="locationC" id="locationC"
       style="position:absolute; left:140px; top:35px">
    <h1 class="tooltip">Location C Title</h1>
  </div>
  <div class="trigger" data-loc="locationD" id="locationD"
       style="position:absolute; left:70px; top:103px">
    <h1 class="tooltip">Location D Title</h1>
  </div>
</div>

<div class="sidebar">
  <div class="trigger" data-loc="locationA"> Loc A
  </div>
  <div class="trigger" data-loc="locationB"> Loc B
  </div>
  <div class="trigger" data-loc="locationC"> Loc C
  </div>
  <div class="trigger" data-loc="locationD"> Loc D
  </div>
<div>

然后使用jQuery：

$(".trigger").hover(function(){
   $("#" + $(this).data("loc") + " .tooltip").fadeIn();
}, function(){
   $("#" + $(this).data("loc") + " .tooltip").fadeOut();
});

使用JQuery构建基本的交互式地图

1 个答案: