在懸停時顯示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 
    } 
    } 
});