gra*_*ury 6 javascript google-maps-api-3 next.js
如何使用 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()
但我收到一个错误，谷歌未定义
Google 地图团队提供了一个快速、有用的教程“如何在 React 中加载 Maps JavaScript API ”，该教程在 Next.js 项目中使用@react-google-maps/api包。下面的代码片段来自教程作者@leighhalliday链接的存储库。
1. 如何加载 Google Maps JavaScript 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的存储库示例中找到完整的代码。