Javascript - Google地图 - 自动填充 [英] Javascript - Google Maps - Autofill

问题描述

我有一个表格，我正在放在一起，我试图让它自动填充我的字段。我95％的成功，但是，我很难让Lat / Long线自动填入适当的表单域。

这是我的HTML

 < div class =control-group> 
< label class =control-label>地址*< / label> 
< div class =controls> 
< input value =placeholder =输入客户完整地址class =form-controlid =autocompletetype =text> 
< / div> 
< / div> 
< div class =control-group> 
< label class =control-label> House Number< / label> 
< div class =controls> 
< input value =class =form-controlid =street_numberdisabled =true> 
< / div> 
< / div> 
< div class =control-group> 
< label class =control-label>街道地址< / label> 
< div class =controls> 
< input value =class =form-controlid =routedisabled =true> 
< / div> 
< / div> 
< div class =control-group> 
< label class =control-label>城市< / label> 
< div class =controls> 
< input value =class =form-controlid =localitydisabled =true> 
< / div> 
< / div> 
< div class =control-group> 
< label class =control-label>状态< / label> 
< div class =controls> 
< input value =class =form-controlid =administrative_area_level_1disabled =true> 
< / div> 
< / div> 
< div class =control-group> 
< label class =control-label> Zipcode< / label> 
< div class =controls> 
< input value =class =form-controlid =postal_codedisabled =true> 
< / div> 
< / div> 
< div class =control-group> 
< label class =control-label>国家< / label> 
< div class =controls> 
< input value =class =form-controlid =countrydisabled =true> 
< / div> 
< / div> 
< div class =control-group> 
< label class =control-label> Lat< / label> 
< div class =controls> 
< input value =class =form-controlid =LatLngBoundsdisabled =true> 
< / div> 
< / div> 
< div class =control-group> 
< label class =control-label>长< / label> 
< div class =controls> 
< input value =class =form-controlid =LatLngBoundsdisabled =true> 
< / div> 
< / div> 
  

这里是我的Javascript。

  var placeSearch，autocomplete; 
 //需要添加经纬度来填充字段。 
 var componentForm = {
 street_number：'short_name'，
 route：'long_name'，
 locality：'long_name'，
 administrative_area_level_1：'short_name'，
国家：'long_name'，
 postal_code：'short_name'，
 
}; 
 
函数initAutocomplete（）{
 autocomplete = new google.maps.places.Autocomplete（（document.getElementById（'autocomplete'）），{types：['geocode']}）; 
 autocomplete.addListener（'place_changed'，fillInAddress）; 
 
 
函数fillInAddress（）{
 var place = autocomplete.getPlace（）; 
（componentForm中的var组件）{
 document.getElementById（component）.value =; 
 document.getElementById（component）.disabled = true; 
} 
 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] [componentForm [addressType]]; 
 document.getElementById（addressType）.value = val; 
 
 
 
  

解决方案

1. 您的HTML无效。您有两个id =LatLngBounds元素。


2. 您没有任何代码来填充表格中的纬度和经度值。

ol>



解决这些问题使它适用于我：



代码段：





var placeSearch，autocomplete; //需要添加经纬度来填充字段。 var componentForm = {street_number：'short_name'，route：'long_name'，locality：'long_name'，administrative_area_level_1：'short_name'，country：'long_name'，postal_code：'short_name'，};函数initAutocomplete（）{autocomplete = new google.maps.places.Autocomplete（（document.getElementById（'autocomplete'）），{types：['geocode']}）; autocomplete.addListener（'place_changed'，fillInAddress）; } function fillInAddress（）{var place = autocomplete.getPlace（）; for（var component in componentForm）{document.getElementById（component）.value =; document.getElementById（component）.disabled = true; } 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] [componentForm [addressType]]; document.getElementById（addressType）.value = val; }} document.getElementById（Latitude）。value = place.geometry.location.lat（）; document.getElementById（Longitude）。value = place.geometry.location.lng（）; } google.maps.event.addDomListener（window，load，initAutocomplete）;

 < script src =https://maps.googleapis.com/maps/api/js?libraries=places>< / script>< div class =control-group> ; < label class =control-label> Address *< / label> < div class =controls> < input value =Beacon St，Boston，MAplaceholder =输入客户完整地址class =form-controlid =autocompletetype =text> < / div>< / div>< div class =control-group> < label class =control-label> House Number< / label> < div class =controls> < input value =class =form-controlid =street_numberdisabled =true> < / div>< / div>< div class =control-group> < label class =control-label>街道地址< / label> < div class =controls> < input value =class =form-controlid =routedisabled =true> < / div>< / div>< div class =control-group> < label class =control-label>城市< / label> < div class =controls> < input value =class =form-controlid =localitydisabled =true> < / div>< / div>< div class =control-group> < label class =control-label>状态< / label> < div class =controls> < input value =class =form-controlid =administrative_area_level_1disabled =true> < / div>< / div>< div class =control-group> < label class =control-label> Zipcode< / label> < div class =controls> < input value =class =form-controlid =postal_codedisabled =true> < / div>< / div>< div class =control-group> < label class =control-label>国家< / label> < div class =controls> < input value =class =form-controlid =countrydisabled =true> < / div>< / div>< div class =control-group> < label class =control-label> Lat< / label> < div class =controls> < input value =class =form-controlid =Latitudedisabled =true> < / div>< / div>< div class =control-group> < label class =control-label>长< / label> < div class =controls> < input value =class =form-controlid =Longitudedisabled =true> < / div>< / div>  

I have a form that I am putting together and I am trying to have it auto fill my fields. I have been successful with 95% of it, however, I am having difficulty getting the Lat / Long cords to auto fill into the appropriate form field.

Here is my HTML

            <div class="control-group">
            <label class="control-label">Address *</label>
                <div class="controls">
                    <input value="" placeholder="Enter the customers full address" class="form-control" id="autocomplete" type="text">
                </div>
        </div>
        <div class="control-group">
            <label class="control-label">House Number</label>
                <div class="controls">
                    <input value="" class="form-control" id="street_number" disabled="true">
                </div>
        </div>
        <div class="control-group">
            <label class="control-label">Street Address</label>
                <div class="controls">                
                    <input value="" class="form-control" id="route" disabled="true">
                </div>
        </div>
        <div class="control-group">
            <label class="control-label">City</label>
                <div class="controls">
                    <input value="" class="form-control" id="locality" disabled="true">
                </div>
        </div>
        <div class="control-group">
            <label class="control-label">State</label>
                <div class="controls">
                    <input value="" class="form-control" id="administrative_area_level_1" disabled="true">
                </div>
        </div>      
        <div class="control-group">
            <label class="control-label">Zipcode</label>
                <div class="controls">
                    <input value="" class="form-control" id="postal_code" disabled="true">
                </div>
        </div>
        <div class="control-group">
            <label class="control-label">Country</label>
                <div class="controls">
                    <input value="" class="form-control" id="country" disabled="true">  
                </div>
        </div>
        <div class="control-group">
            <label class="control-label">Lat</label>
                <div class="controls">
                    <input value="" class="form-control" id="LatLngBounds" disabled="true">
                </div>
        </div>
        <div class="control-group">
            <label class="control-label">Long</label>
                <div class="controls">
                    <input value="" class="form-control" id="LatLngBounds" disabled="true">
                </div>
        </div> 

And here is my Javascript.

    var placeSearch, autocomplete;
// Need to add Lat / Long to populate field.
    var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name',

    };

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

    function fillInAddress() {
        var place = autocomplete.getPlace();
            for (var component in componentForm) {
                document.getElementById(component).value = "";
                document.getElementById(component).disabled = true;
            }
            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][componentForm[addressType]];
                        document.getElementById(addressType).value = val;
                    }
            }
    }

解决方案

1. your HTML is invalid. You have two elements with id="LatLngBounds".
2. you don't have any code to populate the latitude and longitude values in the form.

Fixing those makes it work for me:

code snippet:

    var placeSearch, autocomplete;
     // Need to add Lat / Long to populate field.
    var componentForm = {
      street_number: 'short_name',
      route: 'long_name',
      locality: 'long_name',
      administrative_area_level_1: 'short_name',
      country: 'long_name',
      postal_code: 'short_name',

    };

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

    function fillInAddress() {
      var place = autocomplete.getPlace();
      for (var component in componentForm) {
        document.getElementById(component).value = "";
        document.getElementById(component).disabled = true;
      }
      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][componentForm[addressType]];
          document.getElementById(addressType).value = val;
        }
      }
      document.getElementById("Latitude").value = place.geometry.location.lat();
      document.getElementById("Longitude").value = place.geometry.location.lng();
    }
    google.maps.event.addDomListener(window, "load", initAutocomplete);

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div class="control-group">
  <label class="control-label">Address *</label>
  <div class="controls">
    <input value="Beacon St, Boston, MA" placeholder="Enter the customers full address" class="form-control" id="autocomplete" type="text">
  </div>
</div>
<div class="control-group">
  <label class="control-label">House Number</label>
  <div class="controls">
    <input value="" class="form-control" id="street_number" disabled="true">
  </div>
</div>
<div class="control-group">
  <label class="control-label">Street Address</label>
  <div class="controls">
    <input value="" class="form-control" id="route" disabled="true">
  </div>
</div>
<div class="control-group">
  <label class="control-label">City</label>
  <div class="controls">
    <input value="" class="form-control" id="locality" disabled="true">
  </div>
</div>
<div class="control-group">
  <label class="control-label">State</label>
  <div class="controls">
    <input value="" class="form-control" id="administrative_area_level_1" disabled="true">
  </div>
</div>
<div class="control-group">
  <label class="control-label">Zipcode</label>
  <div class="controls">
    <input value="" class="form-control" id="postal_code" disabled="true">
  </div>
</div>
<div class="control-group">
  <label class="control-label">Country</label>
  <div class="controls">
    <input value="" class="form-control" id="country" disabled="true">
  </div>
</div>
<div class="control-group">
  <label class="control-label">Lat</label>
  <div class="controls">
    <input value="" class="form-control" id="Latitude" disabled="true">
  </div>
</div>
<div class="control-group">
  <label class="control-label">Long</label>
  <div class="controls">
    <input value="" class="form-control" id="Longitude" disabled="true">
  </div>
</div>

这篇关于Javascript - Google地图 - 自动填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！