在悬停时显示Google地图控件

Question

当用户将鼠标悬停在地图上时，如何显示默认的Google地图控件？否则，我希望隐藏控件。

Answer 1

您可以使用地图的setOptions方法来隐藏或显示控件。将想要显示/隐藏的所有controlOptions作为参数传递给一个对象，并将控件的值设置为true或false。

将mouseout和mouseover的eventlisteners添加到地图并在其中设置选项。

例子：

//the controls you want to hide 
    var controlsOut={ 
        mapTypeControl:false, 
        zoomControl:false, 
        panControl:false, 
        streetViewControl:false 
        }; 

    //create a copy of controlsOut and set all values to true 
    var controlsIn={}; 

     for(var c in controlsOut) 
     { 
     controlsIn[c]=true; 
     } 

    //initially hide the controls 
    map.setOptions(controlsOut) 

    //add listeners to show or hide the controls 
     google.maps.event.addDomListener(map.getDiv(), 
           'mouseover', 
           function(e) 
           { 
            e.cancelBubble=true; 
            if(!map.hover) 
            { 
             map.hover=true; 
             map.setOptions(controlsIn); 
            } 
            }); 

     google.maps.event.addDomListener(document.getElementsByTagName('body')[0], 
           'mouseover', 
           function(e) 
           { 
            if(map.hover) 
            { 
            map.setOptions(controlsOut); 
            map.hover=false; 
            } 
           }); 

Answer 2

这似乎是关于关于制作地图控件悬停只有唯一的问题。上面的答案对我来说不是很有用，所以我想我会记录我自己的修改：

// dom is the enclosing DOM supplied to new google.maps.Map 
// controlsIn and controlsOut are hashes of options to set 
// when the mouse enters or exits. 

$(dom).mouseenter(function(evt) { 
    if (!map.hover) { 
    map.hover = true 
    map.setOptions(controlsIn) 
    } 
}); 

$('body').mouseover(function(evt) { 
    if (map.hover) { 
    if ($(evt.target).closest(dom).length == 0) { 
     map.hover = false 
     map.setOptions controlsOut 
    } 
    } 
});