如何使用nextjs加载谷歌地图api？

Question

如何使用 Nextjs 加载和使用 google 地图 api？

1 - 如何加载 api？我尝试将其加载到 _document.js 中：

import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

const source = `https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&libraries=places`

const Document = () => {
  return (
    <Html>
      <Head>
        <Script type="text/javascript" src={source} strategy="beforeInteractive" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

export default Document

2 - 如何引用 API？

类似：？

window.google.maps.places.AutocompleteService().getPlacePredictions()

但是我收到一个错误，谷歌未定义

我也尝试过使用 npm 库，但似乎都不起作用。反应地点自动完成使用地点自动完成

Answer 1

Google 地图团队提供了一个快速、有用的教程“如何在 React 中加载 Maps JavaScript API”，该教程在 Next.js 项目中使用 @react-google-maps/api 包。下面的代码片段来自教程作者 @leighhalliday 链接的 repo。

1。如何加载 Google 地图 JavaScript API

将您的 API 密钥传递给 useLoadScript （由 @react-google-maps/api 提供的 React 钩子，用于加载 Maps API）
加载后，返回 GoogleMap 组件的实例
- 在这个简化的示例中，初始位置被记忆。但请参阅下面的第二个示例，了解如何与 Google Places API
- 您还可以选择在地图上添加
```
Marker
```

import { useMemo } from "react";
import { GoogleMap, useLoadScript, Marker } from "@react-google-maps/api";

export default function Home() {
 const { isLoaded } = useLoadScript({
   googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
 });

 if (!isLoaded) return <div>Loading...</div>;
 return <Map />;
}

function Map() {
 const center = useMemo(() => ({ lat: 44, lng: -80 }), []);

 return (
   <GoogleMap zoom={10} center={center} mapContainerClassName="map-container">
     <Marker position={center} />
   </GoogleMap>
 );
}

2。如何使用 Places + Google Maps API 添加自动完成功能

Google 地图团队提供了第二个教程，利用 use-places-autocomplete 包在地图中实现搜索+自动完成。您还可以在 @leighhalliday 的存储库 example 中找到完整代码。

Answer 2

我在尝试在 nextjs 中使用 google 地图 api 时遇到问题。

问题是我无法访问 search.tsx 文件所在的路径。我在控制台中收到 404 错误，在邮递员中，使用路径 http://localhost:3000/api/search 我也收到 404 错误。我与您分享我的代码和文件组织，感谢您的帮助！ :)

page.tsx：

        for (const category of selectedCategories) {
      try {
        const response = await fetch("../api/search", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            location,
            category,
            filters: {
              minRating,
              minReviews,
              businessHours,
              ...filters,
            },
          }),
        });

        if (!response.ok) {
          throw new Error(
            `API request failed with status ${response.status}`
          );
        }

        const data: SearchResponse = await response.json();

        if (!data.success) {
          throw new Error(data.error || "Failed to fetch leads");
        }

        const leads = data.results;

        // Update count for each
        setExtractedLeadsCount((prev) => prev + leads.length);

        // Add leads to array with additional metadata
        const processedLeads = leads.map((lead) => ({
          ...lead,
          category,
          searchLocation: location,
          extractedAt: new Date().toISOString(),
        }));

        allLeads = [...allLeads, ...processedLeads];
      } catch (error) {
        toast({
          title: "Error",
          description: `Failed to fetch ${category} in ${location}: ${error.message}`,
          variant: "destructive",
        });
        continue;
      }
    }

搜索.tsx：

    import { NextApiRequest, NextApiResponse } from 'next';
import fetch from 'node-fetch';

interface GooglePlacesResponse {
    results: any[];
    status: string;
    error_message?: string;
}

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
    if (req.method === 'POST') {
        const { location, category } = req.body as { location: string; category: string };

        try {
            const response = await fetch(
                `https://maps.googleapis.com/maps/api/place/textsearch/json?query=${encodeURIComponent(category)}+in+${encodeURIComponent(location)}&key=APIKEY`
            );
            const data: GooglePlacesResponse = await response.json();

            res.status(200).json(data); // Devuelve los datos obtenidos
        } catch (error) {
            console.error("Error fetching data from Google Places:", error);
            res.status(500).json({ error: "Error fetching data" });
        }
    } else {
        res.setHeader('Allow', ['POST']);
        res.status(405).end(`Method ${req.method} Not Allowed`);
    }
};

export default handler;

如何使用nextjs加载谷歌地图api？

问题描述投票：0回答：2

2个回答

最新问题

如何使用nextjs加载谷歌地图api？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2