我正在为我的react webapp开发一个基于邮政编码的过滤系统,我在使用这个功能时遇到了麻烦:
const handleFilterChange = async (event) => {
console.log('test')
setPostcodeFilter(event.target.value);
console.log(event.target.value)
if (event.target.value) {
console.log('test2')
const response = await mapsClient.geocode({
params: {
address: event.target.value,
key: 'APIKEY',
},
});
console.log('test3')
if (response.data.results.length > 0) {
const { lat, lng } = response.data.results[0].geometry.location;
const newQuery = database.ref('stations').orderByChild('info/lat').startAt(lat - parseFloat(radius) / 111).endAt(lat + parseFloat(radius) / 111);
const newSnapshot = await newQuery.get();
const newGasStationsData = [];
// Calculate the distance between each station and the user's location
const distances = [];
newSnapshot.forEach((childSnapshot) => {
const { lat: stationLat, lng: stationLng } = childSnapshot.val().info;
const distance = haversine(lat, lng, stationLat, stationLng);
distances.push(distance);
newGasStationsData.push({ id: childSnapshot.key, ...childSnapshot.val(), distance });
});
// Sort the gas stations based on distance
const sortedGasStationsData = newGasStationsData.sort((a, b) => a.distance - b.distance);
setGasStations(sortedGasStationsData);
}
} else {
fetchData();
}
};
该功能在使用chrome的pc上工作正常,但在移动的上停止
const response = await mapsClient.geocode({
params: {
address: event.target.value,
key: 'APIKEY',
},
});
它之前记录了test 2,但没有记录test 3。如果有人可以帮助我或有任何想法。谢谢
起初我以为输入不会触发函数,但后来我添加了日志,发现它会触发函数。我看了谷歌文档,但找不到'@googlemaps/google-maps-services-js'库的解决方案。
1条答案
按热度按时间ovfsdjhp1#
它被阻止了,所以我只是创建了一个firebase函数来替换const response = await mapsClient.geocode({ params:{ address:event.target.value,key:'APIKEY',},});
因为是我自己的项目所以不在乎安全问题。