转移谷歌静态地图

Question

我有一个（lat，lon）对，我想在静态地图上绘制。 但是，我打算在地图的下半部分覆盖一个对话框，因此我想转移＆＃34;转移＆＃34;地图向上，使气球位于图像的上半部分。

为了说明这里是一张以旧金山为中心的地图（37.7833，-122.4167），气球位于中心。

https://maps.google.com/maps/api/staticmap?center=37.7833,-122.4167&zoom=15&size=400x400&markers=color:red|37.7833,-122.4167

我想要的是一张看起来像这样的地图。我手动将中心纬度调整了一些小数以向上移动。

https://maps.google.com/maps/api/staticmap?center=37.7803,-122.4167&zoom=15&size=400x400&markers=color:red|37.7833,-122.4167

任意减去纬度对我来说似乎不是最好的方法，并且想知道是否有人有更好的建议？

Answer 1

您可以申请更大的地图，然后例如按所需的值剪辑图像。

或者将图像用作背景图像并通过背景位置移动：

＆＃13;

＆＃13;

<div style="width:400px;
            height:400px;
            background-image:url(https://maps.google.com/maps/api/staticmap?center=37.7833,-122.4167&zoom=15&size=400x600&markers=color:red|37.7833,-122.4167);
            background-position:0 -200px;">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在所有情况下都可能不实用（取决于你对缩放的处理方式），但一个简单的解决方案是指定具有高度偏移的地图图像，然后在较短的div中将其置于绝对位置，如下所示： / p>

HTML

    <div id = "container">
       <img src = "https://maps.google.com/maps/api/staticmap?center=37.7803,-122.4167&zoom=15&size=400x500&markers=color:red|37.7803,-122.4167"/>
    </div>

CSS

#container {
    width:400px;
    height:400px;
    overflow:hidden;
    position:relative;
}
#container > img {
    position:absolute;
    bottom:0;
}

FIDDLE