Question

我正在尝试在rafael / mapael地图上对齐工具提示。目前，它们默认为地图的左下方，但希望它们显示在正在悬停的地块附近。

我在这里创建了一个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提供an example，告诉你如何执行你想要的。

如果您用鼠标悬停雷恩，您将看到工具提示。

如果您点击雷恩，您将被带到维基百科页面。

使用工具提示时，您需要实际添加一些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选项（如果需要，还有一个目标选项）。

根据documentation：

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示例中，您使用的是Mapael v0.7.1。 我强烈建议您更新到最新的2.1.0。

如何在rafael / mapael贴图上的绘图旁边对齐工具提示

1 个答案: