在AMP HTML頁面上用標記嵌入地圖

當前我使用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頁面上用標記嵌入地圖

上看到最高和最低值在AMP HTML頁面上放置一個標記時，包含Google Map的正確方法是什麼？我在論壇或Github的問題上沒有看到有關此問題的任何問題，所以我很好奇是否有其他人遇到過這種情況。

來源

2016-03-21 Du3

你是正確的*「這似乎做的方式這當前正在使用amp-iframe擴展名「*」。地圖可以使用'amp-iframe'，靜態地圖應該可以和'amp-img'和'amp-click-to-play'一起使用，它們應該能夠很好地協同工作。除非你使用'view'地圖，否則我認爲Amp的HTML還不支持Maps with Markers。檢查這個[例子]（https://github.com/ampproject/amphtml/blob/master/examples/released.amp.html）。 – abielita

請提供顯示您的偏好地圖嵌入的Gist或JSFiddle。我們將基於此找出解決方案。你也見過這個例子：https://ampbyexample.com/components/amp-iframe/#example11 – ade

你的兩個例子都需要一個地方ID，我沒有。我只有座標。我想放棄標記。目前，您必須使用Google Map API在Javascript中執行此操作。如果AMP HTML需要豐富的代碼片段來替換幕後的javascript，那麼看起來唯一的方法就是通過查找座標服務器端的地點ID與Google Maps API，然後我可以使用PlaceID。這裏的問題 - 有沒有其他的方式來處理這種情況，而無需查找Place ID服務器端。通過座標和標記的地圖非常常見。 – Du3

我發現這個代碼在他們的GitHub庫https://github.com/ampproject/amp-by-example/blob/master/src/20_Components/amp-iframe.html#L62-L72

<amp-iframe width="600" height="400" 
          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"> 
    </amp-iframe>

來源

2016-03-27 00:51:51

這需要一個地點ID。尋找包含標記的基於協調的方法。 – Du3

訣竅是不要使用「查看」模式，而是「地方」模式。使用地點模式，您不需要地點ID，只需使用座標即可。舉個例子：

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

作爲一個額外的注意，如果你正在使用這個與AMP，我建議你有一個佔位符圖像的情況下，iframe是太靠近頁面（AMP的規則）的頂部。在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 
    />

，所以它具有以下格式：在這種情況下，我可能會使用一個<amp-img>，像這樣

<amp-iframe ... > 
    <amp-img .../> 
</amp-iframe>

來源

2017-02-05 22:34:43

在AMP HTML頁面上用標記嵌入地圖

回答

相關問題