簡體   English   中英

我應該在 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?

我應該在 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() 獲取預測,您可以綁定自定義下拉列表。

 <!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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM