Question

任何人都可以帮我弄清楚如何设置光标与一些自定义消息，如下面的网站

http://www.rightmove.co.uk/draw-a-search.html

他们将自定义消息显示为“点击并释放以放置您的第一个点”，后来更改为“点击地图以绘制边缘”。

Answer 1

这与Google地图无关。它是他们自己的定制JS。请查看这个小提琴，了解如何开始使用它，使用jQuery加速。

$('.container').on( 'mousemove', function(event){

    $('.hint').css({
        top: event.pageY - 15,
        left: event.pageX + 20
    });

});

Answer 2

这些效果是使用CSS和Javascript完成的，与Google地图无关。使用CSS，您将更改光标，使用Javascript，您可以显示，隐藏和移动消息。例如：

HTML：

<div id="cursor-div">
</div>

<div id="cursor-message">
    <p>Message cursor</p>
</div>

CSS：

#cursor-div{
    cursor: crosshair;
    width:50px;
    height:100px;
    background-color:red;
}

#cursor-message{
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}

Javascript（使用jQuery）：

$("#cursor-div").mousemove(function(event){
   $("#cursor-message").css("top",event.pageY-20);
   $("#cursor-message").css("left",event.pageX+20);
});

$("#cursor-div").mouseenter(function(event){
    $("#cursor-message").show();
});

$("#cursor-div").mouseleave(function(event){
    $("#cursor-message").hide();
});

在这里你可以看到它有效： DEMO

希望它有所帮助！

Google map api v3：使用自定义消息设置光标

2 个答案: