Ereignis nach Auswahl des Standorts von Google API in der Textbox

-1

Ich bin neu in JavaScript und Google API. Ich möchte eine Aktion ausführen, wenn der Benutzer den von der Google API vorgeschlagenen Standort in der Textbox auswählt. Ich kann die Aktion nicht ausführen, wenn der Benutzer einen beliebigen Ort in der Textbox auswählt. Bitte helfen Sie mir. Ich benutze diesen Code.Ereignis nach Auswahl des Standorts von Google API in der Textbox

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Place Autocomplete Address Form</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> 
    <script> 
     // This example displays an address form, using the autocomplete feature 
     // of the Google Places API to help users fill in the information. 

     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' 
     }; 

     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; 
      } 
     } 
     } 
     // [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); 
      autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, 
       geolocation)); 
      }); 
     } 
     } 
     // [END region_geolocation] 

    </script> 

    <style> 
     #locationField, #controls { 
     position: relative; 
     width: 480px; 
     } 
     #autocomplete { 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     width: 99%; 
     } 
     .label { 
     text-align: right; 
     font-weight: bold; 
     width: 100px; 
     color: #303030; 
     } 
     #address { 
     border: 1px solid #000090; 
     background-color: #f0f0ff; 
     width: 480px; 
     padding-right: 2px; 
     } 
     #address td { 
     font-size: 10pt; 
     } 
     .field { 
     width: 99%; 
     } 
     .slimField { 
     width: 80px; 
     } 
     .wideField { 
     width: 200px; 
     } 
     #locationField { 
     height: 20px; 
     margin-bottom: 2px; 
     } 
    </style> 
    </head> 

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

    <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> 
    </body> 
</html>

Quelle

2016-03-28 Priyadarshani mini

können Sie verwenden:

google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    fillInAddress(); 
    alert("aaa"); // Here you can perform any action 
});

Quelle

2016-03-28 15:04:54

Ereignis nach Auswahl des Standorts von Google API in der Textbox

Antwort

Verwandte Themen