谷歌地图控制相应移动答案

【问题标题】：Google Maps control to move accordingly谷歌地图控制相应移动
【发布时间】：2011-04-18 10:18:42
【问题描述】：

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

编辑，澄清：我希望 Google 地图 100% 到 100%，让它工作。我还希望在左上角（或整个左侧）有一个菜单叠加层，能够滑入和滑出。然而，在左上角，有谷歌地图缩放控件，我不希望我的菜单覆盖它，我希望它在我的菜单打开时“滑行”。

Google 在其基于网络的版本上也这样做：http://maps.googl.com

【问题讨论】：

我不明白你的意思。您想实现类似 Google 地图的功能吗？还是要嵌入 a Google 地图？

标签： css google-maps

【解决方案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";
}

这就是你要找的吗？

【讨论】：

格本，我认为你对 100% 的想法有误。我建议我的 HTML 布局的方式应该满足您的需求。 Google 地图网站上的菜单不会越过地图，它会移动 google 地图。
我希望地图本身是静态的，我只想让这个缩放控制器元素移动。
在谷歌地图网站上，只有当点击的功能滑出时，它才会在侧边栏下方移动地图，它在移动设备上的工作方式也不同