小贝子编程

谷歌地图控制相应移动



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

编辑，澄清一下:我想让谷歌地图100% × 100%地工作。我还想有一个菜单覆盖在左上角(或只是整个左侧)与滑动进出的能力。然而，在左上角，有谷歌地图缩放控件，我不想让我的菜单覆盖它，我想让它在我的菜单打开时"滑行"过来。

Google在他们的网页版本上也是这样做的:http://maps.googl.com

您需要创建正确的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";
}

这是你想要的吗

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium