谷歌地图工具提示mouseover/mouseout

Google map tooltip mouseover/mouseout

本文关键字：mouseout mouseover 工具提示 谷歌地图      更新时间：2023-09-26

我的谷歌地图工作正常，但mouseover和mouseout没有显示div。有人能看到我的错误或我做错了什么吗？我在主机服务器上安装了jquery。

<html>
<head>
<title>Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="jquery/jquery.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
    var LatLng = new google.maps.LatLng(51.620946, -8.890981);
    var mapOptions = {
        zoom: 12,
        center: LatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
    var contentstring = '<div style="height:50px;background-color:red;width:50px;">Hello</div>';           
    var LatLng = new google.maps.LatLng(51.620946, -8.890981);
    var marker_0 = new google.maps.Marker({
        position:LatLng,
    map:map,
    descrip:contentstring,
    link:'https://www.google.ie/'
    }) 
    google.maps.event.addListener(marker_0,'mouseover',function(){
    tooltip.show(this.descrip); 
    });
    google.maps.event.addListener(marker_0,'mouseout',function(){
        tooltip.hide(); 
    });
    google.maps.event.addListener(marker_0,'click',function(){
        window.open(this.link);     
    }); 
}
$(document).ready(function(){
    initialize();
})

</script>
</head>
<body>
    <div id="map-canvas" style="width:600px;height:400px;border:solid 1px red;"></div>
</body> 
</html>

提前感谢您的帮助。

从上面的代码来看，您似乎没有定义变量"tooltip"

不要将descrip和link属性传递给marker_0，试着只传递title，它就可以工作了。像这样。。。

function initialize() {
    var LatLng = new google.maps.LatLng(51.620946, -8.890981);
    var mapOptions = {
        zoom: 12,
        center: LatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var contentstring = '<div style="height:50px;background-color:red;width:50px;">Hello</div>';           
    var marker_0 = new google.maps.Marker({
        position:LatLng,
        map:map,
        title: contentstring
        //descrip:contentstring,
        //link:'https://www.google.ie/'
    }) 
    /*
    ** HAVE COMMENTED THIS BIT OUT AS THE MARKER ABOVE WILL WORK AS A TOOL TIP **
    google.maps.event.addListener(marker_0,'mouseover',function(){
        tooltip.show(this.descrip); 
    });
    google.maps.event.addListener(marker_0,'mouseout',function(){
        tooltip.hide(); 
    });
    google.maps.event.addListener(marker_0,'click',function(){
        window.open(this.link);     
    }); */
}

这里有一个简单的标记Exmaple

可用于标记的属性列在DOCS中。

希望这能有所帮助。

相关文章：