谷歌地图静态图像 API 作为背景图像？答案

【问题标题】：Google Map Static Image API as Background Image?谷歌地图静态图像 API 作为背景图像？
【发布时间】：2014-12-06 17:53:14
【问题描述】：

我正在尝试使用静态 Google 地图作为内联 CSS 背景图像。

我特指这个 API：https://developers.google.com/maps/documentation/staticmaps/

当我在实际的img 标记中单独调用图像时，它可以完美运行。将其添加为 CSS 背景图像，它不会。我找不到任何说明它不应该工作的文档。

这是我正在使用的代码：

<div class="static-map" style="background:url('https://maps.googleapis.com/maps/api/staticmap?center=Hollywood, FL, USA&zoom=7&size=420x200&maptype=roadmap
&markers=color:red%7C26.0112014,-80.14949009999998') no-repeat; background-size:cover;">

有谁知道使用动态查询的图像是否有限制？如果你直接访问 URL，你会看到图片：https://maps.googleapis.com/maps/api/staticmap?center=Hollywood,%20FL,%20USA&zoom=7&size=420x200&maptype=roadmap%20&markers=color:red%7C26.0112014,-80.14949009999998

更新我已将范围缩小到 URL 的 &markers=color:red%7C26.0112014,-80.14949009999998 部分。可能是:，但编码也不起作用......

【问题讨论】：

为我工作：jsfiddle.net/80z9b8jz

标签： css google-maps background-image

【解决方案1】：

我想通了——除了上面粘贴的代码之外，我还有一个附加到 URL 的 API 密钥（出于明显的原因我不想分享）。

但 Google 似乎不允许您将 localhost 环境与 API 密钥相关联，因此拒绝了该请求。

放弃 API 密钥，直到它进入生产服务器是我能想到的唯一解决方案。

【讨论】：