我应该在Google Api javascript中进行什么更改，以便它只能显示印度城市，而不能落后于州和印度

What change should i make in Google Api javascript so it can only show the indian cities without trailing state and india?

本文关键字：显示 城市 于州 不能 javascript Api Google 什么 我应该      更新时间：2023-09-26

我应该在Google Api javascript中进行哪些更改，以便它只能显示印度城市，而不能落后于州和印度？ 

<html>
<head>
  <script>
    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 initAutocomplete() {
      // 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.
      var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), {
        types: ['(cities)']
      });
      autocomplete.addListener('place_changed', fillInAddress);
    }
    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;
        }
      }
    }
     // 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 = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };
          var circle = new google.maps.Circle({
            center: geolocation,
            radius: position.coords.accuracy
          });
          autocomplete.setBounds(circle.getBounds());
        });
      }
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC1YjmCfbQrueEjKUbHAjzOZf1OpeQKqOU&libraries=places&callback=initAutocomplete" async defer></script>
  
</head>
<body>
  <input id="autocomplete" placeholder="Enter The  City " onFocus="geolocate()" name="ct" type="text" required>
</body>
</html>

使用 AutocompleteService（） 获取预测，您可以绑定自定义 droupdown。

<!DOCTYPE html>
<html>
  <head>
    <title>Retrieving Autocomplete Predictions</title>
  </head>
  <body>
    <div id="right-panel">
      <p>Query suggestions for city:</p>
      <ul id="results"></ul>
    </div>
    <script>
      function initService() {
        var displaySuggestions = function (predictions, status) {
          if (status != google.maps.places.PlacesServiceStatus.OK) {
            alert(status);
            return;
          }
          var a = predictions;
          predictions.forEach(function (prediction) {
            var li = document.createElement('li');
            //li.appendChild(document.createTextNode(prediction.description));
            li.appendChild(document.createTextNode(prediction.terms[0].value));
            document.getElementById('results').appendChild(li);
          });
        };
        var service = new google.maps.places.AutocompleteService();
        service.getPlacePredictions(
                {
                  input: "jai",
                  types: ['(cities)'],
                  componentRestrictions: {country: 'in'}
                },
        displaySuggestions);
<!-- service.getQueryPredictions({ input: 'j' }, displaySuggestions); -->
      }
    </script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC1YjmCfbQrueEjKUbHAjzOZf1OpeQKqOU&libraries=places&callback=initService"
    async defer></script>
  </body>
</html>

试试，这可能会有所帮助

<!DOCTYPE html>
<html>
  <head>
    <title>Retrieving Autocomplete Predictions</title>
    <style>
      .dropdown ul{
        position:absolute;
        border:1px solid #ddd;
        display:black;
        margin:0;
        padding:0;
      }
      .dropdown li{
        list-style:none;
        padding:3px 10px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="right-panel">
      <p>Query suggestions for city:</p>
      <ul id="results"></ul>
    </div>
        <script>
          function initService() {
            displaySuggestions  = function (predictions, status) {
              if (status != google.maps.places.PlacesServiceStatus.OK) {
              alert(status);
            return;
            }
            var options = '<ul>';
            predictions.forEach(function (prediction) {             options += ('<li onclick="clicked(this)">' + prediction.terms[0].value + '</li>');
          });
            options += '</ul>';
            document.getElementById('ddlCity').innerHTML = options;
          document.getElementById('ddlCity').style.display = 'block';
          };    
        }
    function GetCity(){
    var keywords = document.getElementById('autocomplete').value;
    if(keywords != ''){
    var service = new google.maps.places.AutocompleteService();
    service.getPlacePredictions(
            {
            input: keywords,
            types: ['(cities)'],
            componentRestrictions: {country: 'in'}
            },
            displaySuggestions);
      }
      else
      {
        document.getElementById('ddlCity').style.display = 'none';
      }
    }
    function clicked(obj){
    document.getElementById('autocomplete').value = obj.innerHTML;
    document.getElementById('ddlCity').style.display = 'none';
    }
    </script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC1YjmCfbQrueEjKUbHAjzOZf1OpeQKqOU&libraries=places&callback=initService"
    async defer></script>
    <input id="autocomplete" placeholder="Enter The  City " name="ct" onkeyup="GetCity()
          ;" type="text" required>
    <div id="ddlCity" class="dropdown">
    </div>
  </body>
</html>

相关文章：