Jquery 如何保持谷歌地图静态图像的流动性/响应性

我已经在谷歌上搜索了很多，但是找不到任何值得赞赏的意见

我需要在jQuery移动项目中加入一个静态google地图图像，以便使用phonegap构建一个应用程序。地图图像必须几乎完全填充视口。问题是如何打开，因为它显然会在不同屏幕大小的不同设备上打开。我尝试过百分比法，但在这里肯定不行

我想得到一些指导，让谷歌地图静态图像的布局保持在一个流动的布局，以最简单的方式（请，如果可能的话）

---

谢谢

将最初需要的最大图像尺寸装入一个容器中，例如380 x 250的尺寸

这将是位置：相对溢出隐藏和最大大小您需要

figre 
    {
        position:relative;
        width: 100%;
        overflow:hidden;
    }

然后使用“顶部和左侧”将图像绝对定位在容器内部的中心位置

e、 g

---

我曾试图通过引用这个网站来设计Google静态地图的样式，以遵循引导程序

index.html

---

静态地图现在在我的网站上响应。我不确定它是否适用于您，但我就是这样做的。

您可以使用Picturefill这样的中间插件，它允许您根据屏幕大小、视口大小、屏幕分辨率等各种条件向每个用户提供适当的图像

用法：

---

我知道这个问题很老了，但这里有另一个建议，可以简化显示居中的单个标记地图。对于宽达1280的地图，与&scale=2一起使用可能是最好的

.your-static-map-container
    {
        width: 100%;
        height: 250px; /* or whatever the height of your map is */
    }
.your-static-map-container img
    {
        object-fit: cover;
        width: 100%;
        height: 100%; /* adjust with media queries for specific height */
    }

---

使用这个1）@Ved我一直在跟踪它。我不需要动态贴图，但需要一个静态贴图来用作图像，而不是背景。您甚至不需要a标记中的图像标记，只需在

a.map-container

样式中指定一个

height

。保留图像标签有两个缺点：它会导致两个贴图加载（一个用于a标签的背景图像，一个用于img标签本身）和2。它会导致地图在屏幕上瞬间闪烁（因为图像加载后，图像不透明度设置为0，然后背景图像出现-这会在我测试时导致闪烁）。但伟大而优雅的解决方案！

<div class="col-sm-8 map-wrapper">
    <a target="_blank" class="map-container" href="LINK_TO_GOOGLE_MAP">
         <img src="YOUR_GOOGLE_STATIC_MAP_QUERY">
    </a>
</div>

a.map-container {
    display: block;
    background-image: url("YOUR_GOOGLE_STATIC_MAP_QUERY");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    line-height: 0;
}
.map-container img
{
    max-width: 100%;
    opacity: 0;
}

.your-static-map-container
    {
        width: 100%;
        height: 250px; /* or whatever the height of your map is */
    }
.your-static-map-container img
    {
        object-fit: cover;
        width: 100%;
        height: 100%; /* adjust with media queries for specific height */
    }