11

目前，我使用 Google Maps API 生成带有标记的地图（给定一组纬度/经度坐标）到给定位置。在 AMP HTML 中，目前执行此操作的方法似乎是使用 amp-iframe 扩展https://github.com/ampproject/amphtml/tree/master/extensions。问题是您不能使用带有坐标的 Google 地图嵌入代码，除非您使用“视图”地图。我没有地点 ID，所以我不能使用地点模式。我不能使用“查看”模式，因为它没有标记。我在https://developers.google.com/maps/documentation/embed/guide#overview看了高低

在放置了标记的 AMP HTML 页面上包含 Google 地图的正确方法是什么？我在论坛或 Github 问题中没有看到任何关于此的现有问题，所以我很好奇是否有其他人遇到过同样的情况。

4

3 回答 3

6

诀窍是不使用“查看”模式，而是使用“地点”模式。使用地点模式，您不需要地点 ID，只需使用坐标即可。举个例子：

<amp-iframe 
  width="600"
  height="400"
  layout="responsive"
  sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
  frameborder="0"
  src="https://www.google.com/maps/embed/v1/place?key=<key>&q=44.0,122.0">
</amp-iframe>

作为附加说明，如果您将其与 AMP 一起使用，我建议您包含一个占位符图像，以防 iframe 太靠近页面顶部（AMP 规则）。在这种情况下，我可能会使用<amp-img>，如下所示：

<amp-img
  src="https://maps.googleapis.com/maps/api/staticmap?key=<key>&center=44.0,122.0&zoom=15&size=600x400"
  width="600"
  height="400"
  layout="responsive"
  placeholder
/>

在 iframe 中，使其具有以下格式：

<amp-iframe ... >
    <amp-img .../>
</amp-iframe>
于 2017-02-05T22:34:43.370 回答
2

我在他们的 GitHub 存储库中找到了这段代码https://github.com/ampproject/amp-by-example/blob/master/src/20_Components/amp-iframe.html#L72-L84

<amp-iframe width="600" 
          height="400"
          title="Google map pin on Googleplex, Mountain View CA"
          layout="responsive"
          sandbox="allow-scripts allow-same-origin allow-popups"
          frameborder="0"
          src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ2eUgeAK6j4ARbn5u_wAGqWA&key=AIzaSyCNCZ0Twm_HFRaZ5i-FuPDYs3rLwm4_848">

于 2016-03-27T00:51:51.597 回答
1

在 amp-frame 中嵌入页面需要：

  1. 附加 Javascript ( <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>)
  2. 放置距离放大器页面顶部至少 600 像素。
于 2019-02-06T00:02:54.343 回答