reactjs 谷歌地理编码不工作的移动的网站?

mzillmmw  于 2023-04-05  发布在  React
关注(0)|答案(1)|浏览(114)

我正在为我的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'库的解决方案。

ovfsdjhp

ovfsdjhp1#

它被阻止了,所以我只是创建了一个firebase函数来替换const response = await mapsClient.geocode({ params:{ address:event.target.value,key:'APIKEY',},});
因为是我自己的项目所以不在乎安全问题。

相关问题