我在前端JS应用程序中使用Google Places自动完成API，如下所示:
const place = new google.maps.places.Autocomplete(inputRef.value, options)
google.maps.event.addListener(place, 'place_changed', function () {
const { place_id: placeIdGoogle, formatted_address: name } = place.getPlace()
// ...
})
我想捕获错误，特别是速率限制错误，以便优雅地处理它们并向用户显示一些内容。
是否有我可以订阅的事件?
以编程方式检索位置自动完成服务预测和位置详细信息
根据文档，您正在使用的是自动完成小部件。但是，由于小部件已经为您处理了这个过程，因此在处理API的响应方面没有太多的自由。
你能做的就是试着用编程的方式创建一个。
在此过程中，您可以使用三个classes:
google.maps.places.AutocompleteService()用于获取预测google.maps.places.PlacesService()并使用getDetails方法获取最终用户选择的地方的详细信息。google.maps.places.AutocompleteSessionToken()以确保您的账单是优化的(因为使用会话令牌将使您的自动完成查询免费。查看文档了解更多信息)
您应该通过编程实现Places API以能够处理错误的原因是因为AutocompleteService()和PlacesService().getDetails()有一个STATUS参数，该参数返回状态码/文本。
你可以这样做:
function initService() {
var li;
var input = document.getElementById("location");
var autoService = new google.maps.places.AutocompleteService();
var sessionToken = new google.maps.places.AutocompleteSessionToken();
input.addEventListener("keyup", keyUpFunc);
function keyUpFunc() {
var ul = document.getElementById('results');
while(ul.firstChild)ul.removeChild(ul.firstChild);
autoService.getPlacePredictions({
input: input.value ,
sessionToken: sessionToken
}, displaySuggestions);
}
var displaySuggestions = function(predictions, status) {
// if the status returned is not 'OK', which means an error, it would send an alert with the text code of the error
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
predictions.forEach(function(prediction) {
li = document.createElement('li');
li.setAttribute("data-id", prediction.place_id);
li.appendChild(document.createTextNode(prediction.description));
li.addEventListener("click", function(e) {
var place_id = this.getAttribute("data-id");
input.value = this.innerHTML;
getPlaceDet(place_id);
});
document.getElementById('results').appendChild(li);
});
};
function getPlaceDet(placeId){
var request = {
placeId: placeId,
sessionToken: sessionToken,
fields: ['name', 'vicinity']
};
var placeService = new google.maps.places.PlacesService(document.createElement('div'));
placeService.getDetails(request, callback);
function callback(place, status) {
// if the status returned is not 'OK', which means an error, it would send an alert with the text code of the error.
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status)
}
if (status == google.maps.places.PlacesServiceStatus.OK) {
console.log('Name: ' + place.name +' Vicinity: ' + place.vicinity );
sessionToken = new google.maps.places.AutocompleteSessionToken();
}
}
}
}html, body {
height: 100%;
margin: 0;
padding: 0;
}
#right-panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#right-panel select, #right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}<!DOCTYPE html>
<html>
<head>
<title>JavaScript Autocomplete Service</title>
</head>
<body>
<div id="right-panel">
<input type="text" id="location">
<p>Place suggestions</p>
<ul id="results"></ul>
</div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initService"
async defer></script>
</body>
</html>请注意我的注释// if the status returned is not 'OK', which means an error, it would send an alert with the text code of the error.
查看此链接了解更多关于PlacesAutocompleteStatus: https://developers.google.com/maps/documentation/places/web-service/autocomplete#PlacesAutocompleteStatus
了解PlacesDetailsStatus的更多信息:https://developers.google.com/maps/documentation/places/web-service/details#PlacesDetailsStatus
希望这对你有帮助!