文章/答案/技术大牛

发布

社区首页 >问答首页 >Next.js Head -您已经多次在此页面中包含了Google API。

问Next.js Head -您已经多次在此页面中包含了Google API。
EN

Stack Overflow用户

提问于 2021-12-10 15:48:37

回答 2查看 3.2K关注 0票数 2

为了使用反应-位置.自动完成库，我实现了gmaps脚本，如文档中所述，但是我得到了一个“您已经在这个页面上多次包含了Google API”。当我转到任何带有4-5脚本标签拷贝的页面时出错.

如果删除GooglePlacesScript组件，则不会添加脚本的实例。

如果我将GooglePlacesScript组件放在页面或组件级别上，那么无论我在网站上走到哪里，我都会得到错误。

知道下一步为什么要复制脚本吗？

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;

reactjs

google-maps

next.js

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-12-13 14:34:59

找到解决方案:使用next/script更新GooglePlacesScript代码(Next v11+)：

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;

票数 3

Stack Overflow用户

发布于 2021-12-13 14:07:59

我建议使用@googlemaps/react包装器。

import { Wrapper } from "@googlemaps/react-wrapper";

const MyApp = () => (
  <Wrapper apiKey={"YOUR_API_KEY"}>
    <MyMapComponent />
  </Wrapper>
);

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70307107

复制

相似问题

问Next.js Head -您已经多次在此页面中包含了Google API。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Next.js Head -您已经多次在此页面中包含了Google API。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Next.js Head -您已经多次在此页面中包含了Google API。
EN