谷歌地图api v3:用自定义消息设置光标

Google map api v3: Set cursor with custom message

本文关键字：自定义消息 置光标 api v3 谷歌地图      更新时间：2023-09-26

有人能帮我弄清楚如何像下面的网站一样用一些自定义消息设置光标吗

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

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

这与谷歌地图无关。这是他们自己的自定义JS。查看这个fiddle，了解如何使用jQuery快速入门。

http://jsfiddle.net/g1t50jrg/1/

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

这种效果是用CSS和Javascript完成的，与谷歌地图无关。使用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

希望它能有所帮助！

相关文章：