Google GeoCode 无法在移动网站上运行？

Question

我现在正在为我的 React web 应用开发一个基于邮政编码的过滤系统，我在使用这个功能时遇到了问题：

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',
        },
      });

它之前记录了test2但没有记录test3。如果有人可以帮助我或有任何想法。谢谢

起初我以为输入没有触发功能，但后来我添加了日志，发现它会触发功能。我查看了谷歌文档，但找不到“@googlemaps/google-maps-services-js”库的解决方案。

Answer 1

它被阻止了，所以我刚刚创建了一个 firebase 函数，它替换了 const response = await mapsClient.geocode({ 参数：{ 地址：event.target.value, 键：'APIKEY'， }, });

因为这只是我自己的一个项目，所以我不关心安全性。