Question

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

我创建了一个随机的html页面并使用我的API密钥测试了代码，它工作正常。

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

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

我将Jquery和我的JS加载到页脚底部的basic.html中（我的其他每个页面都扩展了这个基本的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中，只有谷歌示例中的代码，仅此而已。在我的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中调用New > AngularJS > 2.0.x (TS)功能。我也不知道它在单个html页面上是如何工作的。

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

geolocate()

另外，正如前一个问题中已经讨论的那样，这不是jQuery问题。 AFAIK Google API可以在localhost上运行。

您可以告诉开发者控制台说的内容吗？（打开页面 - ＆gt;打开控制台日志（chrome中的f12） - ＆gt;刷新页面）

Flask Google Maps API自动填充Jquery无法识别

1 个答案: