地图嵌入带标记的AMP HTML页面

Question

目前我使用谷歌地图API来生成一个标记（给定的纬度/经度坐标集）给定位置的地图。在AMP HTML，看来要做到这一点目前正在使用的放大器的iframe扩展https://github.com/ampproject/amphtml/tree/master/extensions的方式。问题是，除非您使用的是“视图”地图，你无法使用谷歌地图嵌入代码坐标。我没有一个地方的ID，所以我不能使用放置模式。我不能使用“查看”模式，因为这没有标记。我看着高和低的https://developers.google.com/maps/documentation/embed/guide#overview

什么是包括具有置于其上的标记物的AMP HTML页面上的谷歌地图的正确方法？我没有看到在论坛上或在Github的问题，这方面有任何存在的问题，所以我很好奇，如果任何人遇到了这种相同的情况。

Answer 1

诀窍是不要使用“查看”模式，而是“地方”模式。随着地方模式，你不需要一个地方的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>

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

Answer 3

在由AMP帧中嵌入一个页面需要：

1. 额外的JavaScript（<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>）
2. 从功放页面的顶部放置至少600像素。