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

Question

我想实现google的简单autocomplete函数，就像他们的示例中一样简单： Google Autocomplete Example

我创建了一个随机的html页面，并用我的API密钥测试了代码，效果很好。在

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

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

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

^{pr2}$

在我的主.js这里只有来自google示例的代码，没有更多。 在我的心口_爱因斯坦.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 %}

我已经尝试过很多种在flask中实现它的可能性，但是没有成功，代码本身是可以的，因为在一个html页面上它可以很好地工作。我错过了什么？在

编辑：

我刚在onload上测试了一个简单的alert（）函数，但这个函数并不起作用，因此jQuery根本无法识别，但路径是正确的（我通过浏览器中的HTML视图检查了路径）

编辑2:

好吧，所以问题很奇怪，我的jQuery只在基本.html但没有一个页面扩展了基本的html。我怎么解决这个问题？在

Answer 1

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

在google示例中，您需要添加以下内容：

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

---

另外，正如前面的问题中已经讨论过的，这不是jQuery的问题。而AFAIK Google api在本地主机上也能工作。在

你能告诉开发人员控制台怎么说吗。在chrome控制台中打开页面刷新（第12页）