用于地址自动填充的 Google map api javascript 不起作用（InvalidValueError：不是 HTMLInputElement 的实例）

Question

我在我的 ruby​​ on rails 应用程序中使用 google map api 进行地址自动填充。在两种形式中，我使用了地址自动填充。但只有一种形式可以正常工作。

工作代码

new.html.erb 在位置

 <%= form_for @location,url: locations_path,html: {method: 'post'}  do |f| %>
<div class="form_format">

    <div class="form-group">
        <div class="star">*</div>
        <%= f.label :address %>
        <%= f.text_field :address, class: "form-control"%>
    </div>

    <div class="form-group">
        <div class="star">*</div>
        <%= f.label :locality %>
        <%= f.text_field :locality, class: "form-control",
        readonly: true %>
    </div>
    <div class="form-group">
        <%= f.label :city %>
        <%= f.text_field :city, class: "form-control",readonly: true %>
    </div>
    <div class="form-group">
        <div></div>
        <%= f.label :state %>
        <%= f.text_field :state, class: "form-control",
        readonly: true%>
    </div>
    <div class="form-group">
        <div class="star">*</div>
        <%= f.label :country %>
        <%= f.text_field :country, class: "form-control",
        readonly: true %>
    </div>

    <div class="form-group"><center>                

        <%= f.submit 'Add Details', class: "btn btn-primary" %></center>
    </div>  
</div>  

工作 js

var placeSearch, location_address;
var address=[];
var componentForm = {
  formatted_address: 'location_address',
  sublocality_level_1: 'location_locality',
  locality: 'location_city',
  administrative_area_level_1: 'location_state',
  country: 'location_country'
};

function initAutocomplete() {
  location_address = new google.maps.places.Autocomplete(
																						(document.getElementById('location_address')),
      {types: ['geocode']});

  location_address.addListener('place_changed', fillInAddress);

}

function fillInAddress() {
	address=[];
  var place = location_address.getPlace();
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i]['long_name'];
      document.getElementById(componentForm[addressType]).value = val;
      
    }
  }
}

function geolocate() {
  if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      location_address.setBounds(circle.getBounds());
    });
  }
}

不工作的代码

医生信息中的edit.html.erb

<%= form_for @doctorinfo,url: doctorinfo_path(@doctorinfo),html: {method: 'patch',multipart: true}  do |f| %>
<div class="form_format">
    <div class="form-group">
        <div class="star">*</div>
        <%= f.label :name %>
        <%= f.text_field :name, class: "form-control"%>
    </div>
    <div class="form-group">
        <div class="star">*</div>
        <%= f.label :address %>
        <%= f.text_field :address, class: "form-control"%>
    </div>

    <div class="form-group">
        <div class="star">*</div>
        <%= f.label :locality %>
        <%= f.text_field :locality, class: "form-control",
        readonly: true %>
    </div>
    <div class="form-group">
        <%= f.label :city %>
        <%= f.text_field :city, class: "form-control",readonly: true %>
    </div>
    <div class="form-group">
        <div></div>
        <%= f.label :state %>
        <%= f.text_field :state, class: "form-control",
        readonly: true%>
    </div>
    <div class="form-group">
        <div class="star">*</div>
        <%= f.label :country %>
        <%= f.text_field :country, class: "form-control",
        readonly: true %>
    </div>

    <div class="form-group">
        <div class="star">*</div>
        <%= f.label :specialization %>
        <%= f.text_field :specialization, class: "form-control"%>
    </div>
    <div class="form-group">
        <div class="star">*</div>
        <%= f.label :time_per_slot %>
        <%= f.text_field :time_per_slot, class: "form-control"%>
    </div>
    <div class="form-group">
        <div class="star">*</div>
        <%= f.label :fees %>
        <%= f.text_field :fees, class: "form-control"%>
    </div>
    <p>
    <label>Profile Picture:</label>
    <% if @doctorinfo.profile?%>
        <%= image_tag (@doctorinfo.profile_url), class: 'profile' %>
    <% end%>    
    <%= f.file_field :profile %>
    <%= f.hidden_field :profile_cache %>
  </p>

  <p>
    <label>
      <%= f.check_box :remove_profile %>
      Remove Picture
    </label>
  </p>      
    <div class="form-group"><center>                
        <%= f.submit 'Update Details', class: "btn btn-primary" , name: "saving"%></center>
    </div>  
</div>  

不工作的js

var placeSearch, doctorinfo_address;
var address=[];
var componentForm = {
  formatted_address: 'doctorinfo_address',
  sublocality_level_1: 'doctorinfo_locality',
  locality: 'doctorinfo_city',
  administrative_area_level_1: 'doctorinfo_state',
  country: 'doctorinfo_country'
};

function initAutocomplete() {
  doctorinfo_address = new google.maps.places.Autocomplete(
																						(document.getElementById('doctorinfo_address')),
      {types: ['geocode']});

  doctorinfo_address.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
	address=[];
  var place = doctorinfo_address.getPlace();
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i]['long_name'];
      document.getElementById(componentForm[addressType]).value = val;
    }
  }
}

function geolocate() {
  if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      doctorinfo_address.setBounds(circle.getBounds());
    });
  }
}

当我在浏览器中检查控制台时，错误是

InvalidValueError: 不是 HTMLInputElement 的实例

我做错了什么？提前谢谢。

Answer 1

我发现了问题。我将 js 文件放在 assets/javascripts 文件夹中。所以它造成了歧义。通过在其各自的视图中添加 js 文件解决了问题。希望它可以节省某人的时间。