Question

所以，我有一个用jQuery编写的简单的工具提示，它只需要一个元素可以使用class =“tooltips”，并且只需要一个元素（和css of course）

但是如何在Google地图中的折线上实现它呢？

function tooltipDisplay() {
    return function() { $(this).contents("span:last-child").css({ display: "block" }); }
}
function tooltipHide() {
    return function() { $(this).contents("span:last-child").css({ display: "none" }); }
}
function tooltipMove() {
    return function(e) {
        var mousex = e.pageX + 10;
        var mousey = e.pageY + 5;
        $(this).contents("span:last-child").css({  top: mousey, left: mousex });
    }
}
$(".tooltips").hover(tooltipDisplay(),tooltipHide());

    $(".tooltips").mousemove(tooltipMove());

我尝试使用

    google.maps.event.addListener(flightPath, 'mouseover', tooltipDisplay());

    google.maps.event.addListener(flightPath, 'mouseout', tooltipHide());

    google.maps.event.addListener(flightPath, 'mousemove', tooltipMove());

没有任何结果。（显然是因为我无法在起跑线的折线上制作跨度）

Answer 1

与问题没有直接关系（所以也要制作这个Wiki），但是不需要所有那些函数包装器，只需在调用时使用tooltipDisplay而不是tooltipDisplay() ...使用函数直接，而不是调用它的结果，像这样整体：

function tooltipDisplay() {
    $(this).contents("span:last-child").css({ display: "block" });
}
function tooltipHide() {
    $(this).contents("span:last-child").css({ display: "none" });
}
function tooltipMove(e) {
    var mousex = e.pageX + 10;
    var mousey = e.pageY + 5;
    $(this).contents("span:last-child").css({  top: mousey, left: mousex });
}
$(".tooltips").hover(tooltipDisplay,tooltipHide).mousemove(tooltipMove);

Answer 2

右。解决。

经过一些跳跃之后，事实证明它比看起来更容易。

简单地说：“这个”对Google Maps Polylines没用，因为它是文档。因此，我把它放下了一个档次并给它自己的简单功能：

    google.maps.event.addListener(flightPath, 'mouseover', function() {
        $('#mapTooltip').show();
    });

    google.maps.event.addListener(flightPath, 'mouseout', function() {
        $('#mapTooltip').hide();
    });

然而，我也注意到放置工具提示的行为无法通过鼠标悬停在监听器中完成，因为无论如何它必须调用一个元素，导致一个循环，每当我移动到任何地方时它就会被触发，因此， document.ready区域我添加了这个：

function tooltipMove(e) {
    var y = e.pageY;
    var x = e.pageX;

    $("span").css({
        top:y+5,
        left:x+10
    });
}

$("#gMap").mousemove(tooltipMove);

然后只是设计css以适应。就这么简单！

在Google地图中调用自定义函数？

2 个答案: