javascript - 地理位置自动填写地址表

Question

我有这个表格，我想用用户的地理位置自动填写地址、城市、州和邮政编码输入字段，我是 javascript 领域的菜鸟，我真的需要这方面的帮助。

这是我的代码，我需要帮助来创建将填充字段的 javascript。

<form name="catcustomcontentform11679" onsubmit="return checkWholeForm11679(this)" enctype="multipart/form-data" method="post" action="/CustomContentProcess.aspx?CCID=24718&amp;OID={module_oid}&amp;OTYPE={module_otype}">
    <table class="webforms" cellspacing="0" cellpadding="2" border="0">
        <tbody>
            <tr>
                <td><label for="ItemName">Item Name</label><br />
                <input class="cat_textbox_small" type="text" name="ItemName" id="ItemName" maxlength="255" /> &bull;</td>
            </tr>
            <tr>
                <td><label for="ItemDescription">Item Description</label><br />
                <textarea name="ItemDescription" id="ItemDescription" cols="10" rows="4" class="cat_listbox"></textarea></td>
            </tr>
            <tr>
                <td><label for="ItemAddress">Address</label><br />
                <input type="text" name="ItemAddress" id="ItemAddress" class="cat_textbox" maxlength="500" /></td>
            </tr>
            <tr>
                <td><label for="ItemCity">City</label><br />
                <input type="text" name="ItemCity" id="ItemCity" class="cat_textbox" maxlength="255" /></td>
            </tr>
            <tr>
                <td><label for="ItemState">State</label><br />
                <input type="text" name="ItemState" id="ItemState" class="cat_textbox" maxlength="255" /></td>
            </tr>
            <tr>
                <td><label for="ItemZip">Zipcode/Postcode</label><br />
                <input type="text" name="ItemZip" id="ItemZip" class="cat_textbox" maxlength="255" /></td>
            </tr>
            <tr>
                <td><label for="ItemCountry">Country</label><br />
                <select name="ItemCountry" id="ItemCountry" class="cat_dropdown">
                <option value=" ">-- Select Country --</option>
                <option value="MX" selected="selected">MEXICO</option>
                </select></td>
            </tr>
            <tr>
                <td><label for="CAT_Custom_1">Last Name</label><br />
                <input type="text" maxlength="4000" name="CAT_Custom_1" id="CAT_Custom_1" class="cat_textbox" /></td>
            </tr>
            <tr>
                <td><label for="CAT_Custom_2">Email Address</label><br />
                <input type="text" maxlength="4000" name="CAT_Custom_2" id="CAT_Custom_2" class="cat_textbox" /></td>
            </tr>
            <tr>
                <td><input class="cat_button" type="submit" value="Submit" id="catcustomcontentbutton" /></td>
            </tr>
        </tbody>
    </table>
</form>

<小时/>

<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js?vs=b1566.r451189-phase1"></script>

<小时/>

//<![CDATA[
var submitcount11679 = 0;
function checkWholeForm11679(theForm){
var why = "";
if (theForm.ItemName) why += isEmpty(theForm.ItemName.value, "Item Name");
if (why != ""){alert(why);return false;}
if(submitcount11679 == 0){
submitcount11679++;theForm.submit();return false;
}else{
alert("Form submission is in progress.");return false;
}
}
//]]>

Answer 1

您可以尝试执行以下操作:(您可能希望为用户提供一个输入地址的选项。对于诸如订购时不在家、在 friend 家、在工作等情况。您可以不想使用实际的纬度和经度来填写地址，而是为了帮助缩小范围，如本示例所示。

http://jsfiddle.net/bobrierton/vbc1a5uo/

var placeSearch, autocomplete;
var componentForm = {
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  postal_code: 'short_name'
};

function initialize() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
    /** @type {HTMLInputElement} */
    (document.getElementById('autocomplete')), {
      types: ['geocode']
    });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
}

// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  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;
	  
    }
  }
  //var keys=[];for (var key in place.address_components[0]) keys.push(key);
  //alert(keys):
  document.getElementById('autocomplete').value = 
    place.address_components[0]['long_name'] + ' ' +
    place.address_components[1]['long_name'];
  
  /*document.getElementById('route').value = (document.getElementById('chbSame').checked ? document.getElementById('autocomplete').value : '');*/
  document.getElementById('route').value = '';
}
  // [END region_fillform]

// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = new google.maps.LatLng(
        position.coords.latitude, position.coords.longitude);
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

  // [END region_geolocation]
initialize();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<tbody>
         <tr>
                <td><label for="ItemAddress">Address</label>
                <input type="text" name="ItemAddress" id="autocomplete" class="cat_textbox" maxlength="500" onFocus="geolocate()" /><br></td>
            </tr>
              <tr>
                <td><label for="ItemAddress2">Address2</label>
                <input type="text" name="ItemAddress2" id="route" class="cat_textbox" maxlength="500" /><br></td>
            </tr>
            <tr>
                <td><label for="ItemCity">City</label>
                <input type="text" name="ItemCity" id="locality" class="cat_textbox" maxlength="255" /><br></td>
            </tr>
            <tr>
                <td><label for="ItemState">State</label>
                <input type="text" name="ItemState" id="administrative_area_level_1" class="cat_textbox" maxlength="255" /><br></td>
            </tr>
            <tr>
                <td><label for="ItemZip">Zipcode/Postcode</label>
                <input type="text" name="ItemZip" id="postal_code" class="cat_textbox" maxlength="255" /></td>
            </tr>
</tbody>