Question

我试图将此主页转换为AMP：excurj.com。有没有办法在英雄搜索字段上保留自动填充功能？

我看到了this个问题。但是，我需要这两个脚本来自动完成工作：

<script src="{% static 'js/autocomplete.js' %}"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=*****&callback=initMap&libraries=places"></script>

这就是autocomplete.js中的内容：

// script to auto complete location

function initMap() {

var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-90, 91), new google.maps.LatLng(-180, 80));
var options = {
types: ['(cities)'],
bounds: defaultBounds
};
var input = document.getElementById('google_city_search');

var autocomplete = new google.maps.places.Autocomplete(input, options);
}

Answer 1

我知道有两种方式：

将页面的自动填充部分放在单独的页面中，然后使用amp-iframe进行展示。
将amp-list与amp-bind一起使用，以实现您自己的自动填充功能。

据我所知Google尚未提供放置自动播放功能的AMP版本。我不久前自己也在努力解决这个问题，并且最初使用了iframe方法。但是由于iframe加载了明显的延迟，并且自动完成基本上是页面的主要部分，我最终使用第二种方法进行了。

有一个很好的示例，说明如何在AMP by Examples上实现自动完成功能。

我专门针对Google地方自动填充功能修改了该示例，您可以查看here。

第二种方法有一个缺点：它稍慢，因为自动填充请求必须在它们到达Google的服务器之前通过您的服务器。

如何让Google商家信息自动填充功能与AMP配合使用？

1 个答案: