如何将 Google Map 静态图像保持在流畅/响应式尺寸上

Posted 2023-05-09

【中文标题】如何将 Google Map 静态图像保持在流畅/响应式尺寸上

【英文标题】：How to keep Google Map static images on a fluid/responsive dimensions

【发布时间】：2013-11-23 02:41:37

【问题描述】：

我已经在谷歌上搜索了很多，但找不到任何明显的意见，

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

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

谢谢

【问题讨论】：

用这个1)view.jquerymobile.com/master/demos/map-geolocation/…

@Ved 我一直在关注它。我不需要动态地图，而是需要用作图像的静态地图，而不是背景。

【参考方案1】：

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

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

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

然后绝对定位使用 top & left 以将图像定位在容器内的中心。

例如

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

【参考方案2】：

我已尝试通过参考此网站来设置 Google Static Map 的样式以遵循 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;

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

【讨论】：

您甚至不需要 a 标签内的图像标签，只需在 a.map-container 样式上指定 height 即可。保留图像标签有两个缺点：它会导致两次地图加载（一个用于 a 标签的背景图像，一个用于 img 标签本身）和 2. 它会导致屏幕上的地图瞬间闪烁（因为设置了图像不透明度图像加载后立即变为 0，然后出现背景图像 - 这在我测试时会导致闪烁）。但伟大而优雅的解决方案！

【参考方案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" >
</picture>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/picturefill/2.0.0/picturefill.min.js" async></script>

【参考方案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 */