我正在使用以下代碼使用 Google Places API 通過 Geosearch 執行“智能”自動完成：
var input = 'field_18';
google.maps.event.addDomListener(document.getElementById(input), 'keydown', function(event) {
if (event.keyCode === 13) {
event.preventDefault();
}
});
var ppx_autocomplete = new google.maps.places.Autocomplete((document.getElementById(input)), { types: ['geocode'] });
ppx_autocomplete.setFields(['geometry', 'formatted_address']);
google.maps.event.addListener(ppx_autocomplete, 'place_changed', function () {
var place = ppx_autocomplete.getPlace();
document.getElementById(input).value = place.formatted_address;
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
document.getElementById('pp_18_geocode').value = latlng;
});
很常見而且很直接。
缺點是：自動完成功能會立即從輸入的前 2 或 3 個字母開始，導致向 Google 發出大量請求，從而消耗我的 API 密鑰。
有沒有辦法限制請求的數量，例如僅在 5 個鍵入的字母之后發送請求，并且可能在一些延遲時間之后發送請求，例如當用戶仍然鍵入時不發送請求......
uj5u.com熱心網友回復：
您正在尋找的東西可以完成，但您需要使用自動完成服務 [1] 而不是自動完成小部件 [2]。這是一個示例，它等待輸入第五個字符以發出請求，然后在每 2 個附加字符后發出一個請求。字符數可以在“edit params here”行進行編輯。您需要插入自己的 API 密鑰。https://codepen.io/ecgover8/pen/ExPqdNd上的一個類似示例每 3 個字符執行一次。
由于您不會使用自動完成小部件，因此您需要自己處理會話令牌 [3]（未顯示）。從價格的角度來看，您是否需要代幣取決于您計劃如何使用預測 [4]。此示例實際上使用預測中的地點 ID 發出地理編碼 API 請求并顯示緯度/經度。
[1] https://developers.google.com/maps/documentation/javascript/places-autocomplete#place_autocomplete_service
[2] https://developers.google.com/maps/documentation/javascript/places-autocomplete#add-autocomplete
[3] https://developers.google.com/maps/documentation/javascript/places-autocomplete#session_tokens
[4] https://developers.google.com/maps/documentation/places/web-service/usage-and-billing#ac-per-request
//declare constants
const ac = document.getElementById("ac");
const g = document.getElementById("geocoded");
const results = document.getElementById("results");
//listen for typing into input box
ac.addEventListener("input", ACRequest);
//show resulting predictions
const displayPredictions = function(predictions, status) {
results.innerHTML = "";
g.innerHTML = "";
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
predictions.forEach(prediction => {
let li = document.createElement("li");
li.appendChild(document.createTextNode(prediction.description));
li.dataset.placeid = prediction.place_id;
li.addEventListener("click", Geo)
results.appendChild(li);
});
let img = document.createElement("img");
img.setAttribute("src", "https://developers.google.com/maps/documentation/images/powered_by_google_on_white.png");
results.appendChild(img);
};
//make autocomplete request if input value length divisible by 3
function ACRequest() {
//edit params here
if ((ac.value.length > 4) && (ac.value.length % 2 == 1)) {
const service = new google.maps.places.AutocompleteService();
service.getPlacePredictions(
{
//here is where you can add bounds, componentrestrictions, types, etc
input: ac.value
}, displayPredictions
)
};
};
function Geo() {
console.log(this.getAttribute("data-placeid"));
const geocoder = new google.maps.Geocoder();
geocoder.geocode(
{
"placeId": this.getAttribute("data-placeid")
}, function(address, status) {
if (status == "OK") {
g.innerHTML = address[0].geometry.location
} else {
alert("Geocode was not successful for the following reason: " status);
}
});
}li {
border: 2px solid blue;
list-style: none;
margin: 2px;
padding: 2px;
}
li:hover {
border: 2px solid red;
}
.pac-card {
border-radius: 2px 0 0 2px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
font-family: Roboto;
margin: 10px 10px 0 0;
outline: none;
}
.title {
background-color: #4D90FE;
color: #FFFFFF;
font-size: 25px;
font-weight: 500;
margin: 10px 0px;
padding: 6px 12px;
}<div class="pac-card">
<div class="title">Autocomplete Makes Requests Every Three Characters</div>
<input id="ac" size="10" type="text" />
<ul id="results"></ul>
<p id="geocoded"></p>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places&v=weekly" async defer></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/412484.html
標籤：
下一篇：將地理點與地圖上的道路匹配