2010-12-31 2 views
0

Итак, у меня есть грязь простой подсказка, написанная на JQuery, требует только элемента, чтобы иметь класс = «подсказки» и сразу после элемента (и CSS конечно)Вызов пользовательских функций на Картах Google?

Но как реализовать это на полилинии в Картах 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()); 

без каких-либо результатов. (очевидно, потому что я не могу сделать прогиб на полилинии для начинающих)

ответ

0

справа. Решаемые.

После немного прыжков через обручи и еще много чего оказалось проще, чем казалось.

Проще говоря: «это» не полезно с помощью Полилиний Карт Google, так как это документ. Поэтому я взял его вниз на ступеньку выше и дал ему свои собственные простые функции, такие:

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, чтобы соответствовать. Просто так!

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); 
+0

Несвязанные, но оценили. :) (Оставляя мой пост неотредактированным для будущего сравнения) – Mantar

+0

И я знаю, что это все еще не связано, но могли бы вы быстро объяснить различия между ними и преимуществами ваших изменений? – Mantar

+0

@Meke - в основном вы удаляете слой из каждого, когда вы вызываете с помощью '()' вы выполняете функцию без параметров * прямо тогда *, а не когда событие запускается ... поэтому вам нужно вернуть функция, которая * работает * во время события ... во многих случаях это вообще не нужно (если вам не требуется определенное закрытие и т. д.). Если вы просто удаляете дополнительный слой, вы определяете ту функцию, которая запускается * во время события * и использует его непосредственно при назначении обработчиков событий. –

Смежные вопросы