如何在流畅/响应式维度上保留Google Map静态图像

Question

我一直在谷歌搜索它,但在同样的情况下找不到任何明显的意见,

我需要在jQuery Mobile项目中加入静态谷歌地图图像,以构建具有phonegap的应用程序.地图图像几乎完全填满视口.问题是如何,因为它显然将在不同屏幕尺寸的不同设备上打开.我尝试过百分比方法,但这肯定不起作用.

我想获得一些指导,以最简单的方式保持流畅布局中谷歌地图静态图像的布局(如果可能的话,请尽可能).

谢谢

Answer 1

将最初需要的最大图像尺寸加载到容器中,例如尺寸为380 x 250

这将是位置:相对于溢出隐藏和您需要的最大尺寸.

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

然后绝对定位使用顶部和左侧将图像集中放置在容器内.

例如

figure img
    {
        position: absolute;
        top: calc(50% - 125px);
        left: calc(50% - 190px);
        }

Answer 2

我试图通过参考这个网站http://webdesigntutsplus.s3.amazonaws.com/tuts/365_google_maps/demo/index.html来设置Google静态地图的样式以关注Bootstrap .

的index.html

<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>

CSS

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;
}

静态地图现在响应我的网站.我不确定它是否适用于你,但我就是这样做的.