Question

我的谷歌地图工作正常，但鼠标悬停和鼠标移动没有显示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>

提前感谢您的帮助。

Answer 1

从上面的代码中，看起来你没有定义变量'tooltip'

Answer 2

不要将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);     
    }); */
}

有一个Simple Marker Exmaple Here

可用于标记的属性是DOCS中的listes。

希望这有帮助。

Google地图工具提示mouseover / mouseout

2 个答案: