Question

基本上，我只想复制http://maps.google.com。我想在“全屏”上使用谷歌地图，并有一个可以滑入和滑出的浮动菜单。但是，当它滑出时，缩放控件应该“相应地移动”而不会隐藏在菜单后面。

编辑，澄清：我希望谷歌地图100％100％，让它工作。我还希望左上角（或整个左侧）有一个菜单覆盖，可以滑入和滑出。但是，在左上方，有谷歌地图缩放控件，我不希望我的菜单覆盖它，我希望它在菜单打开时'scoot'结束。

Google也会在其基于网络的版本上执行此操作：http://maps.googl.com

Answer 1

您需要创建正确的HTML设置。例如：

<强> HTML

<div id="main-wrapper">
  <div id="left-menu-wrapper">
     <!-- code with navigation -->
     <a href="javascript:toggleMenu();"> Show / Hide </a>
  </div>
  <div id="google-window-wrapper">
     <!-- code to display google map here -->
  </div>
</div>

<强> CSS

#main-wrapper {

}
#left-menu-wrapper{
    width:200px;
    float:left;
}
#google-window-wrapper{
    width:auto;
}

<强>的javascript （用于切换菜单块）

var windowHidden = false;
function toggleMenu(){
    windowHidden = !windowHidden;
    document.getElementById("left-menu-wrapper").style.width = 
              (windowHidden) ? "0px" : "200px";
}

这是你想要的吗？

谷歌地图控制相应移动

1 个答案: