Geocomplete 在 Rails 5 中不起作用

Question

我在 Rails proyect 中使用 geocomplete 时遇到问题，基本上我想使用 geocomplete 自动填充一个地方，但是表单无法工作，我尝试使用不太复杂的 geocomplete 函数，但似乎什么都没有才能正常工作。

顺便说一句，我正在使用 "geocomplete_rails" gem。

我复制粘贴的这段代码来自 geocomplete 示例之一，只是更短：

<div id="my_input">

  <input id="geocomplete" type="text" placeholder="Type in an address" 
  autocomplete="off">
  <input class="find_me" type="button" value="Encuentra">
  <div id="my_map">

  </div>

  <div id="my_form">

  </div>

</div>

这里是 geo.js

$("#geocomplete").click(function(){
  console.log("Go");
  $("input").trigger("geocode");
});

$("#my_input").geocomplete({
  map: "#my_mappu",
  mapOptions: {
    zoom: 10
  },
  markerOptions: {
    draggable: true
  },
  details: "#my_form"
});

我的代码中已经有 googlemaps api，在我的 html as

的头部

<script 
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAwAw8El2ksHEry1EmoX6LIoZJsFIPXmdc&libraries=places&"
  async defer>
</script>

这是我需要的 js 文件

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require cocoon
//= require turbolinks
//= require dropzone
//= require timepicker
//= require datepicker
//= require jquery-ui
//= require geocomplete
//= require geo
//= require_tree .

对我来说最奇怪的是，每当我在 "$("#geocomplete").click(function(){" 之外请求警报时，它会起作用，但单击选择器什么都不做。任何想法为什么这不起作用？

Answer 1

这是你的 HTML

<div id="my_input">

  <input id="geocomplete" type="text" placeholder="Type in an address" 

...

所以你输入的id是geocomplete，而不是my_input。

而不是调用

$("#my_input").geocomplete({ ...

你应该打电话给

$(document).ready(function() {

  $("#geocomplete").geocomplete({
    ...

除此之外，你想把这行

<script src="https://maps.googleapis.com/maps/api/js?key=xxx&librari‌es=places&" async defer> </script>

在头部部分的顶部，就在 <title> 部分之后

为了帮助未来的人，我制作了一个非常简单的开源 github 存储库，其中包含一个可以运行的 rails 应用程序 => https://github.com/Poilon/super-simple-gplaces

Geocomplete 在 Rails 5 中不起作用

Geocomplete not working in Rails 5

javascript

ruby

jquery

ruby-on-rails

geocomplete