在 AMP HTML 页面上嵌入带有标记的地图 [英] Embed Map with Marker on AMP HTML page
问题描述
目前我使用 Google Maps API 生成带有标记(给定一组纬度/经度坐标)到给定位置的地图.在 AMP HTML 中,目前看来这样做的方法是使用 amp-iframe 扩展https://github.com/ampproject/amphtml/tree/master/extensions.问题是您不能使用带有坐标的谷歌地图嵌入代码,除非您使用的是视图"地图.我没有地方 ID,所以我不能使用地方模式.我不能使用查看"模式,因为它没有标记.我在 https://developers.google.com/maps/documentation/embed/guide#overview
Currently I use the Google Maps API to generate a map with a marker (given a lat/long set of coordinates) to a given location. In AMP HTML, it appears the way to do this currently is using the amp-iframe extension https://github.com/ampproject/amphtml/tree/master/extensions. The issue is you cannot use Google Maps embed code with coordinates unless you are using a 'view' map. I don't have a Place ID, so I cannot use the Place mode. I can't use 'View' mode, since that has no markers. I've looked high and low at https://developers.google.com/maps/documentation/embed/guide#overview
在放置了标记的 AMP HTML 页面上包含 Google 地图的正确方法是什么?我在论坛或 Github 问题中没有看到任何关于此的现有问题,所以我很好奇是否有人遇到过同样的情况.
What is the proper way to include a Google Map on an AMP HTML page that has a marker placed on it? I don't see any existing questions about this on the forum or in Github issues, so I'm curious if anyone else has run into this same scenario.
推荐答案
诀窍是不要使用视图"模式,而是使用地点"模式.使用地点模式,您不需要地点 ID,只需使用坐标即可.举个例子:
The trick is to not use the "view" mode, but rather the "place" mode. With the place mode, you don't need a place ID, you can simply use coordinates. As an example:
<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>
,如下所示:
As an additional note, if you are using this with AMP, I recommend you include a placeholder image in case the iframe is too close to the top of the page (an AMP rule). In that case, I might use an <amp-img>
, like so:
<amp-img
src="https://maps.googleapis.com/maps/api/staticmap?key=<key>¢er=44.0,122.0&zoom=15&size=600x400"
width="600"
height="400"
layout="responsive"
placeholder
/>
在 iframe 中,使其具有以下格式:
within the iframe, so that it has the following format:
<amp-iframe ... >
<amp-img .../>
</amp-iframe>
这篇关于在 AMP HTML 页面上嵌入带有标记的地图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!