為了使用react-places-autocomplete庫，我按照檔案中的說明實作了 gmaps 腳本，但我得到了“您在此頁面上多次包含 Google Maps JavaScript API”。當我轉到帶有 4-5 個腳本標記副本的任何頁面時出錯。
如果我洗掉 GooglePlacesScript 組件，則不會添加腳本實體。
如果我將 GooglePlacesScript 組件放在頁面或組件級別，我仍然會以某種方式在網站上的任何地方看到錯誤。
知道為什么 Next 會復制腳本嗎？
GooglePlacesScript 組件：
import React from "react";
import getConfig from "next/config";
import Head from "next/head";
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
const GOOGLE_MAPS_API_KEY =
serverRuntimeConfig.GOOGLE_MAPS_API_KEY ||
publicRuntimeConfig.GOOGLE_MAPS_API_KEY;
const GooglePlacesScript = () => {
return (
<Head>
<script
type="text/javascript"
src={
"https://maps.googleapis.com/maps/api/js?key="
GOOGLE_MAPS_API_KEY
"&libraries=places"
}
></script>
</Head>
);
};
export default GooglePlacesScript;
_app.js：
import { ThemeProvider } from "styled-components";
import { theme } from "@styles";
import { BaseCSS } from "styled-bootstrap-grid";
import "@fortawesome/fontawesome-svg-core/styles.css";
import "pure-react-carousel/dist/react-carousel.es.css";
import "react-input-range/lib/css/index.css";
import "@styles/_app.css";
import "swiper/swiper-bundle.min.css";
import CartManager from "@components/Cart/CartManager";
import CartContextProvider from "contexts/CartContext";
import AuthContextProvider from "contexts/AuthContext";
import AuthManager from "@components/Auth/AuthManager";
import FavoritesManager from "@components/Favorites/FavoritesManager";
import FavoritesContextProvider from "contexts/FavoritesContext";
import GooglePlacesScript from "@components/GooglePlacesScript";
function MyApp({ Component, pageProps }) {
return (
<ThemeProvider theme={theme}>
<BaseCSS />
<AuthContextProvider>
<AuthManager>
<CartContextProvider>
<CartManager>
<FavoritesContextProvider>
<FavoritesManager>
<GooglePlacesScript />
<Component {...pageProps} />
</FavoritesManager>
</FavoritesContextProvider>
</CartManager>
</CartContextProvider>
</AuthManager>
</AuthContextProvider>
</ThemeProvider>
);
}
export default MyApp;
解決方案編輯：使用 next/script (Next v11 ) 更新 GooglePlacesScript 代碼：
import React from "react";
import getConfig from "next/config";
import Script from "next/script";
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
const GOOGLE_MAPS_API_KEY =
serverRuntimeConfig.GOOGLE_MAPS_API_KEY ||
publicRuntimeConfig.GOOGLE_MAPS_API_KEY;
const source = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places`;
const GooglePlacesScript = () => {
return (
<Script type="text/javascript" src={source} strategy="beforeInteractive" />
);
};
export default GooglePlacesScript;
uj5u.com熱心網友回復：
找到解決方案：使用 next/script (Next v11 ) 更新 GooglePlacesScript 代碼：
import React from "react";
import getConfig from "next/config";
import Script from "next/script";
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
const GOOGLE_MAPS_API_KEY =
serverRuntimeConfig.GOOGLE_MAPS_API_KEY ||
publicRuntimeConfig.GOOGLE_MAPS_API_KEY;
const source = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places`;
const GooglePlacesScript = () => {
return (
<Script type="text/javascript" src={source} strategy="beforeInteractive" />
);
};
export default GooglePlacesScript;
uj5u.com熱心網友回復：
我建議使用@googlemaps/react-wrapper。
import { Wrapper } from "@googlemaps/react-wrapper";
const MyApp = () => (
<Wrapper apiKey={"YOUR_API_KEY"}>
<MyMapComponent />
</Wrapper>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/380954.html