Question

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

看起来很高低

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

Answer 1

诀窍是不使用＆＃34;视图＆＃34;模式，而不是＆＃34;地方＆＃34;模式。使用地点模式，您不需要地点ID，您只需使用坐标即可。举个例子：

    private void home_butt_Click(object sender, EventArgs e)
    {
        Home_Panel.Visible = true;
        Home_Panel.BringToFront();
    }

    private void Intro_butt_Click(object sender, EventArgs e)
    {
        Introduction.Visible = true;
        Introduction.BringToFront();
        Home_Panel.Visible = false;
        Crime.Visible = false;
    }

    private void Crime_butt_Click(object sender, EventArgs e)
    {
        Crime.Visible = true;
        Crime.BringToFront();
        Home_Panel.Visible = false;
        Introduction.Visible = false;
    }

另外请注意，如果您在AMP中使用此功能，我建议您在iframe太靠近页面顶部时使用占位符图片（AMP规则）。在这种情况下，我可能会使用<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-img>

在iframe中

，以便它具有以下格式：

<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
/>

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框架中嵌入页面，则需要：

其他JavaScript（<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>）
展示位置距amp页面顶部至少600px。

在AMP HTML页面上使用标记嵌入地图

3 个答案: