Question

感谢您花时间检查我的问题。

在这里 - 我看到了我试图在客户端网站上复制的Google Maps实施，但我遇到了困难。

以下是我尝试重新制作的效果 - http://www.franckmaurin.com/。当您点击“联系”时，Google地图会从页面顶部展开，推送内容。

所以这就是我的尝试方式 -

<body>
<div id="map-container">
<div id="map_canvas"></div>
</div>
<p id="open-map">Open The Map</a>

.. rest of content

</body>

然后我的CSS

#map_canvas {
height:350px;
width:100%;
}

#map-container {
height:0px;
}

..然后是JS

$('.open-map').click(function() {
  $('#map-container').css("height",350);
});

..这显然是一个精简版。我也希望为下拉列表制作动画..但我仍然会看到一张看起来像http://d.pr/rNnr的不完整地图。不完整的灰色很多。我尝试了不同的打开和关闭方法（包括在容器上设置{height：350px; display：none}但这个问题总是在那里。如果我不隐藏地图容器，那么地图没有问题。

有没有人有任何想法我在这里做错了什么？

Answer 1

你应该设置#map-container css样式，

#map-container {
  float:left;
  height:350px;
  width:960px;//or other width you need
  display:none;
}

然后使用jquery来控制#map-container slideUp和slideDown

壁板内的谷歌地图 - 灰色正方形

1 个答案: