如何在地图上放置链接标签

Question

我想通过HTML，CSS和Javascript创建交互式地图功能。因此，我需要在地图上放置链接标签（或类似的）。下图说明了我要实现的目标：

红色十字架应该是可点击的链接（不一定只有红色十字架 - 如果可以点击透明矩形就没问题。）

到目前为止，我遇到了（图像 - ）地图标记，我可以使用该标记在地图上的相应位置放置矩形。我想知道这是否是最好的方法，或者是否有其他更舒适的方法或最佳做法来做这些事情。

Answer 1

您可以使用html图片地图：

http://en.wikipedia.org/wiki/Image_map

或者只需使用绝对定位将链接放在地图图像的顶部。

我可能会选择绝对定位方法，然后您可以在需要的地方放置自定义样式的锚标记，并将红色X作为锚点内的图像或锚点上的背景图像。

Answer 2

以下是http://qtip2.com/demos使用qTip2的演示。

HTML：

<div id="demo-imagemap">
 <h3>ClICK TO TOGGLE X to see </h3>

<img border="0" usemap="#myMap" alt="map" src="http://4.bp.blogspot.com/-Y6tP6TqJbfA/UX_vggdXEQI/AAAAAAAAAt4/ZfoonzP4Bxs/s1600/ih2LH.jpg">
<map id="myMap" name="myMap">
    <area alt="place 1" shape="rect" coords="192,103,216,119" href="#">
    <area alt="place 2" shape="rect" coords="128,269,156,293" href="#">
    <area alt="place 3" shape="rect" coords="162,311,186,327" href="#">
    <area alt="place 4" shape="rect" coords="172,207,200,235" href="#">
    <area alt="place 5" shape="rect" coords="270,225,312,259" href="#">
</map>

CSS：

 /* Add some nice box-shadow-ness to the modal tooltip */
 #ui-tooltip-modal {
    max-width: 420px;
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, .5);
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, .5);
}
#ui-tooltip-modal .ui-tooltip-content {
    padding: 10px;
}

jQuery的：

    // Create the tooltips only when document ready
$(document).ready(function () {
    // We'll target all AREA elements with alt tags (Don't target the map element!!!)
    $('area[alt]').qtip({
        content: {
            attr: 'alt' // Use the ALT attribute of the area map for the content

        },
        show: 'click',
        hide: 'click',

        style: {
            classes: 'ui-tooltip-tipsy ui-tooltip-shadow'
        }
    });
});

使用您的地图演示，尝试位于X的中心，以及左侧的一些： - http://jsfiddle.net/x5baU/11/