Flask Google Maps API 自动完成 Jquery 无法识别

Question

我想从谷歌实现简单的自动完成功能，就像他们的例子一样简单： Google Autocomplete Example

我创建了一个随机的 html 页面并使用我的 API 密钥测试了代码，它运行良好。

现在我正在努力将这段代码实现到我的烧瓶应用程序中。我没有收到任何错误，但是当我输入城市名称时，没有自动完成功能，当然，如果我提交我输入的内容，我会收到错误：

main.js:38 Uncaught TypeError: Cannot read property 'length' of undefined

我在页脚底部的 basic.html 中加载我的 Jquery 和我的 JS（我的每个其他页面都扩展了这个基本 html，因为还有导航栏和头部）：

{% block footer %}
<div class="container-fluid" id="footer">
<div class="col-sm-4">
<p> Footer Element </p>
<p> Footer Element </p>
<p> Footer Element </p>
<p> Footer Element </p>
</div>

</div> 

<script type=text/javascript src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>

<script type=text/javascript src="{{ url_for('static', filename='js/bootstrap.js') }}"></script>

<script type=text/javascript src="{{ url_for('static', filename='js/main.js') }}"></script>

{% endblock %}
{% block googlemapjs %}{% endblock %}

在我的 main.js 中，只有来自 google 示例的代码，仅此而已。 在我的 zimmer_einstellen.html 中，我正在尝试实现自动完成功能：

{% extends "basic.html" %} 

{% block content %}
<div class = "container zimmer_einstellen">

<table id="address">
  <tr>
    <td class="label">Street address</td>
    <td class="slimField"><input class="field" id="street_number"
          disabled="true"></input></td>
    <td class="wideField" colspan="2"><input class="field" id="route"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">City</td>
    <td class="wideField" colspan="3"><input class="field" id="locality"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">State</td>
    <td class="slimField"><input class="field"
          id="administrative_area_level_1" disabled="true"></input></td>
    <td class="label">Zip code</td>
    <td class="wideField"><input class="field" id="postal_code"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">Country</td>
    <td class="wideField" colspan="3"><input class="field"
          id="country" disabled="true"></input></td>
  </tr>
</table>
</div>

{% endblock %}

{% block googlemapjs %}<script src="https://maps.googleapis.com/maps/api/js?key=HEREISAPIKEY&libraries=places&callback=initAutocomplete"
    async defer></script>{% endblock %}

我已经尝试了很多在烧瓶中实现它的可能性，但没有任何效果，代码本身还可以，因为在单个 html 页面上它可以正常工作。我错过了什么？

编辑：

我刚刚测试了一个简单的alert()函数onload，效果不好，所以jQuery根本无法识别，但路径是正确的（我通过浏览器中的HTML视图检查了路径）

编辑 2：

好的，所以问题很奇怪，我的 jQuery 仅在 basic.html 本身上被识别，但在扩展基本 html 的任何页面上都没有。我该如何解决这个问题？

Answer 1

您没有在 html 中调用 geolocate() 函数。我也看不出它在单个 html 页面上是如何工作的。

从谷歌示例中，您需要添加以下内容：

<div id="locationField">
      <input id="autocomplete" placeholder="Enter your address"
             onFocus="geolocate()" type="text"></input>
</div>

---

此外，正如在上一个问题中已经讨论过的，这不是 jQuery 问题。 AFAIK Google API 确实可以在 localhost 上运行。

您能否说出开发者控制台的内容。 （打开页面-->打开控制台日志（chrome中的f12）-->刷新页面）