0

今天我开始在我的网站中实现谷歌地图，但是我遇到了一个问题，因为为我提供的带有地图的div不能放入另一个div？！

我使用本网站上所述的代码，当我做类似的事情时

<div><div id="map_canvas" style="width:100%; height:100%"></div></div>

它停止工作。为什么？我不希望我的地图显示在整个页面上，我希望它显示在一个普通的 div 中，我可以随时重新设置样式......

4

4 回答 4

0

像这样更改样式表：

<style type="text/css">
  #map_canvas { width : 500px; height : 500px; }
</style>

并且从 div 标签中去掉内联样式表。

<div id="map_canvas"></div>
于 2012-11-29T19:41:25.350 回答
0

现在你有

<div><div id="map_canvas" style="width:100%; height:100%"></div></div>

这应该不起作用，因为您的父 div 没有widthand height。当您使用width/heightin 时%，该元素根据其父元素测量尺寸。如果你对你的父母应用一些宽度和高度element/div，即

<div style="width:300px;height:300px"><div id="map_canvas" style="width:100%; height:100%"></div></div>

然后内部 div (map_canvas )会将宽度和高度应用于100%. 300px或者，您可以删除外部 div。希望能帮助到你。

于 2012-11-29T20:00:58.830 回答
0

您可以为div map_canvas. 它不需要放入另一个内部div来做到这一点。

因此，例如，将您的代码更改为：

     <div id="map_canvas"></div>

和 CSS：

#map_canvas{
    width:400px; /* your own height here */
    height:300px;  /* your own height here */
     border:solid 1px green;  /* your own border if you like */

    /* maybe you want to position it somewhere? you can do for example */
   position:absolute; top:50px; left:50px; 

 }

更新

显然，您还需要在父 DIVS 上设置宽度和高度。我尚未对此进行测试，但请尝试以下操作：

<div id="mapHolder"><div id="map_canvas" style="width:100%; height:100%"></div></div>


#mapHolder {width:100%; height:100%;}

如果做不到这一点，您是否尝试过绝对大小，而不是像我在这个答案顶部的 CSS 中的 % ？

于 2012-11-29T19:42:49.817 回答
0

您可以通过更改宽度和高度值来重新调整地图的大小。所以

<div id="map_canvas" style="width:50%; height:50%"></div>
于 2012-11-29T19:46:01.527 回答