将谷歌地图画布宽度设置为 100% 减去侧边栏宽度？

发布于 2024-12-01 11:02:31 字数 490 浏览 5 评论 0原文

我正在尝试在谷歌地图的左侧显示侧边栏。侧边栏宽度为 380px，我需要地图画布 div 来占据剩余宽度，但到目前为止我还没有成功实现这一点。

地图 div 必须声明宽度和高度，否则不起作用。我试图找到一个宽度 100% 减去 X 像素的解决方案，但在这种情况下它们都不起作用。

有谁知道如何做吗？

谢谢。

我尝试了这个，但看起来它不适用于地图画布 div:

$(document).ready(function(){
$(window).width();  
$(document).width();

var width1 = $(document).width();
var width2 = $("#left").width();

var canvas_width = width1 – width2 + "px";

$('#map_canvas').width = canvas_width;

});

原文

I'm trying to display a sidebar on the left side of a google map. The sidebar width is 380px and I need the map canvas div to take up the remaining width but I have no luck so far accomplishing this.

The map div must have width and height declared, otherwise it doesn't work.
I was trying to find a width 100% minus X pixels solution but no of them is working in this case.

Does anyone has an idea how to do it?

Thanks.

I tried this, but it looks that it doesn't apply to the map canvas div:

$(document).ready(function(){
$(window).width();  
$(document).width();

var width1 = $(document).width();
var width2 = $("#left").width();

var canvas_width = width1 – width2 + "px";

$('#map_canvas').width = canvas_width;

});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风渺 2024-12-08 11:02:31

我遇到了完全相同的问题，但设法解决了它。

例如，如果您的侧边栏 div 宽度为 200 像素，请在 Google 地图写入其内容的 div 周围设置一个额外的 div 容器。

对于该 div-container 设置，

position: absolute;
left: 200px;
right: 0;
height: 100%

在调整大小时也能像魅力一样发挥作用。如果此解决方案不符合您的情况，请告诉我。

I had exactly the same problem, but managed to fix it.

For example, if your sidebar div is 200px wide set an extra div container around the div in which Google Maps writes its content.

For that div-container set

position: absolute;
left: 200px;
right: 0;
height: 100%

Works like a charm, also when resizing. Let me know if this solution doesn't match your situation.

回复收藏 0 原文

合约呢 2024-12-08 11:02:31

我正在使用相对宽度和最小宽度来执行此操作（也是侧边栏+ GM）。我可以切换侧边栏可见/不可见。为了保存原始值，请参阅：在 jQuery 中获取全局样式表的值）。

顺便说一句，我认为你在js中的分配是错误的，它应该是 element.**style**.width 或在 jQuery $("#id").width(value)代码>：
如何设置 div 的宽度（以百分比为单位） JavaScript？

样式：

#sideBar {
float: left;
width: 27.5%;
min-width: 275px;
height: 100%;
z-index: 0;
}

#sideBarLocation div {
display: inline;
}

#mapCanvas
{
width: 72.5%;
min-width: 725px;
height: 100%;
float: left;
z-index: 0;
}

使用 HTML：

<div id="sideBar">
            <!-- tab location starts here -->
            <table id="sideBarLocation" class="sideBarStandard">
            ...
            </table>
</div>
....
<!-- side bar ends here -->
<div id="mapCanvas"></div>

I am doing this (also sidebar + GM) with relative width and min-widths. I can toggle the sidebar visible / invisible. In order to save the original values see: Getting values of global stylesheet in jQuery ).

Btw, I think you assignment in js is wrong, it should be element.**style**.width or in jQuery $("#id").width(value):
How to set width of a div in percent in JavaScript?

The styles:

#sideBar {
float: left;
width: 27.5%;
min-width: 275px;
height: 100%;
z-index: 0;
}

#sideBarLocation div {
display: inline;
}

#mapCanvas
{
width: 72.5%;
min-width: 725px;
height: 100%;
float: left;
z-index: 0;
}

with HTML:

<div id="sideBar">
            <!-- tab location starts here -->
            <table id="sideBarLocation" class="sideBarStandard">
            ...
            </table>
</div>
....
<!-- side bar ends here -->
<div id="mapCanvas"></div>

回复收藏 0 原文

~没有更多了~