如何将工具提示与rafael/mapael地图上的绘图对齐

Question

我试图在拉斐尔/马菲尔地图上对齐工具提示。目前，他们默认在地图的左下角，但希望他们能显示在正在盘旋的情节附近。

我在这里创建了一个jsbin。

http://jsbin.com/pogaqecuwa/edit?html,js,output

我还想添加一个href链接到情节。如果是这样的话，我是否可以包括每个情节的链接，或者我是否需要捕获一个事件处理程序？

    function initMap() {
        var $map = $('#map'),
                state;
        $map.mapael({
            map: {
                name: "usa_states",
            },


            plots: {
                'ny': {
                    latitude: 40.717079,
                    longitude: -74.00116,
                    tooltip: {content: "New York",
                              offset: {
                left:3000,
                top:1000
              }
                    }
                },
                'on': {
                    latitude: 33.145235,
                    longitude: -83.811834,
                    size: 18,
                    tooltip: {content: "Oconee National Forest"}
                },
                'sf': {
                    latitude: 37.792032,
                    longitude: -122.394613,
                    size: 12,
                    tooltip: {content: "San Francisco"}
                },
                'la': {
                    latitude: 26.935080,
                    longitude: -80.851766,
                    size: 26,
                    tooltip: {content: "Lake Okeechobee"}
                },
                'gc': {
                    latitude: 36.331308,
                    longitude: -83.336050,
                    size: 10,
                    tooltip: {content: "Grainger County"}
                },
                'cc': {
                    latitude: 36.269356,
                    longitude: -76.587477,
                    size: 22,
                    tooltip: {content: "Chowan County"}
                },
                'll': {
                    latitude: 30.700644,
                    longitude: -95.145249,
                    tooltip: {content: "Lake Livingston"}
                },
                'tc': {
                    latitude: 34.546708,
                    longitude: -90.211471,
                    size: 14,
                    tooltip: {content: "Tunica County"}
                },
                'lc': {
                    latitude: 32.628599,
                    longitude: -103.675115,
                    tooltip: {content: "Lea County"}
                },
                'uc': {
                    latitude: 40.456692,
                    longitude: -83.522688,
                    size: 11,
                    tooltip: {content: "Union County"}
                },
                'lm': {
                    latitude: 33.844630,
                    longitude: -118.157483,
                    tooltip: {content: "Lakewood Mutual"}
                }
            }
        });
}

//ie svg height fix
        function _fixMapHeight() {
            $map.find('svg').css('height', function () {
                return $(this).attr('height') + 'px';
            });
        }


    $(function () {
        initMap();
    });  

Answer 1

实际上，Mapael提供了一个例子，它向您展示了如何执行您想要的操作。

如果你用鼠标将Rennes悬停，你会看到一个工具提示。

如果你点击Rennes，你就会被带到维基百科页面。

在使用工具提示时，实际上需要添加一些CSS。

通常，这个词用于：

.mapael .mapTooltip {
    position: absolute;
    background-color: #474c4b;
    moz-opacity: 0.70;
    opacity: 0.70;
    filter: alpha(opacity=70);
    border-radius: 10px;
    padding: 10px;
    z-index: 1000;
    max-width: 200px;
    display: none;
    color: #fff;
}

但是，只有位置和显示属性才是具有功能工具提示的必要条件。

关于href链接，Mapael确实支持它！区域、地块或链接可以有一个href选项(如果需要，可以有一个目标选项)。

根据文档

defaultArea / defaultPlot / defaultLink : (Object) Default options for all areas, plotted points or curved links of the map. 
    ...
    href : (String) Href for the elements.
    target : (String) Target of the href for the elements (it can be set to a regular HTML target such as _blank, _self, ...).

另外，我不得不注意到，在您的JSBin示例中，您使用的是Mapaelv0.7.1。I强烈建议您更新到最新的2.1.0.