Question

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

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

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

由于

Answer 1

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

这将是位置：相对于溢出隐藏和你需要的最大尺寸。

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

然后绝对定位使用top＆amp;左边将图像集中放在容器内。

e.g。

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

Answer 2

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

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

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

Answer 3

您可以使用像Picturefill这样的中间插件，它可以根据屏幕尺寸，视口大小，屏幕分辨率等各种条件为每个用户提供合适的图像。

http://scottjehl.github.io/picturefill/

用法：

＆＃13;

<picture>
	<!--[if IE 9]><video style="display: none;"><![endif]-->
	<source srcset="http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=800x800&sensor=TRUE_OR_FALSE, http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=500x500&scale=2&sensor=TRUE_OR_FALSE 2x" media="(min-width: 800px)">
	<source srcset="http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=300x300&sensor=TRUE_OR_FALSE, http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=300x300&scale=2&sensor=TRUE_OR_FALSE 2x">
	<!--[if IE 9]></video><![endif]-->
	<img style="width:100%" srcset="http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=800x300&sensor=TRUE_OR_FALSE, http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=300x300&scale=2&sensor=TRUE_OR_FALSE 2x" alt="Google Map">
</picture>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/picturefill/2.0.0/picturefill.min.js" async></script>

＆＃13;

Answer 4

我知道这个问题已经很久了，但是这是另一个建议，以简化显示以中心为中心的单个标记图。与＆scale = 2一起使用时，最适合1280宽的地图。

.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 */
    }

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

4 个答案:

的index.html

CSS