Показывать элементы управления Google Maps при зависании

Question

Как я могу отображать элементы управления Google Карт по умолчанию, когда пользователь наводит курсор мыши на карту? В противном случае я хотел бы, чтобы элементы управления были скрыты.

Answer 1

Вы можете использовать метод setOptions карты, чтобы скрыть или показать элементы управления. Передайте в качестве аргумента объект со всеми элементами управления, которые вы хотите показать/скрыть, и установите значения элементов управления в true или false.

Добавить список событий для mouseout и mouseover на карту и задать параметры там.

Пример:

//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 
    } 
    } 
});