瓶谷歌地图API自动完成的Jquery无法识别 [英] Flask Google Maps API autocomplete Jquery not recognized

问题描述

我要实现从谷歌简单的自动完成功能，就这么简单在他们的例子：
<一href=\"https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform\"相对=nofollow>谷歌自动完成实例

I want to implement the simple autocomplete function from google, as simple as in their example: Google Autocomplete Example

我创建一个随机的HTML页面，并与我的API密钥测试code，它工作得很好。

I created a random html page and tested the code with my API key, it worked fine.

现在我在努力实现这个code到我的瓶的应用程序。我没有得到任何错误，但是当我进入一个城市名也没有自动完成，当然，如果我提出我进入我得到一个错误：

Now I am struggling to implement this code into my flask application. I do not get any errors, but while I am entering a cityname there is no autocomplete and of course if I submit what I entered I get an error:

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

我在页脚底部装入我的jQuery和我的JS在我basic.html（每隔我的其他网页的扩展了这个基本的HTML，因为里面还有导航栏和头部）：

I am loading my Jquery and my JS in my basic.html at the bottom in the footer (every of my other pages extends this basic html, because there is also the navbar and head):

{% 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只有从谷歌的例子，仅此而已了code。
而在我zimmer_einstellen.html我想实现自动完成功能：

In my main.js there is only the code from the google example and nothing more. And in my zimmer_einstellen.html I am trying to implement the autocomplete function:

{% 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 %}

我已经tryed这么多的可能性，以实现它在烧瓶但是毫无效果，在code本身是好的，因为它工作正常单个HTML页面上。我缺少什么？

I have already tryed so many possibilities to implement it in flask but nothing worked, the code itself is okay because on a single html page it works fine. What am I missing?

编辑：

我刚刚测试了一个简单的警告（）函数的onload，它剪掉藏汉工作，所以jQuery是不是在所有的认可，但路径是正确的。

I just tested a simple alert() function onload, which didnt worked aswell, so jQuery is not recognized at all, but the path is correct (I inspected the path via HTML view in browser)

编辑2：

好了，所以这个问题很奇怪，我的jQuery只在basic.html本身，而是在其中没有扩展基本的html页面的认可。我该如何解决这个问题？

Okay so the problem is weird, my jQuery is only recognized on the basic.html itself but on none of the pages which extend the basic html. How do I fix this?

推荐答案

您是不是要求你的HTML中的大地定位（）功能。我不明白怎么会一个HTML页面上工作，要么。

You're not calling the geolocate() function in your html. I don't see how it will work on a single html page either.

从Google的例子，你需要补充一点：

From the googles example, you need to add this:

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

---

此外，如在previous问题已经讨论的，这不是一个jQuery的问题。而据我所知谷歌的API都在本地主机上运行。

---

Also, as already discussed in the previous question, this is not a jQuery issue. And AFAIK Google APIs do work on localhost.

你能告诉也许开发者控制台说什么。 （打开页面 - >打开控制台日志（在Chrome F12） - >刷新页面）

Can you perhaps tell what the developer console says. (Open page --> Open console log (f12 in chrome) --> refresh page)

这篇关于瓶谷歌地图API自动完成的Jquery无法识别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！