jquery - 如何将 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 Static Map 的样式以遵循 Bootstrap

索引.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/

用法：

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

Answer 4

我知道这个问题已经很老了，但这里有另一个建议来简化显示居中的单个标记图。对于最大 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 */
    }