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

在悬停时显示Google地图控件

2 个答案: