Google 地图 Javascript API 未显示在网页上

Question

我正在尝试在我网站的“联系我们”组件中的 React/Javascript 代码上使用 Google 地图 API，但是地图本身没有显示。我相信代码正在工作，因为地图加载时会出现“正在加载...”语句，但是加载后什么也没有显示。

这是我在 ContactUs.js 文件中的代码：

import React from "react";
import contactuscss from "./ContactUs.module.css";
import Map from "./Map.js";

function ContactUs() {
  return (
    <div className={contactuscss.container}>
      <h2 className={contactuscss.contactus}>CONTACT US</h2>

      <div className={contactuscss.address}>
        <p>Unit 14 Parramatta Business Centre</p>
        <p>2 O'Connell Street</p>
        <p>Parramatta, NSW 2150</p>
        <p>Tel: [phone]</p>
      </div>

      <form>
        <div className={contactuscss.inputcontainer}>
          <input
            className={contactuscss.nameinput}
            type="text"
            id="name"
            name="name"
            placeholder="Name"
          />

          <input
            className={contactuscss.emailinput}
            type="text"
            id="email"
            name="email"
            placeholder="Email"
          />

          <input
            className={contactuscss.phoneinput}
            type="phone"
            id="phone"
            name="phone"
            placeholder="Phone"
          />

          <textarea
            className={contactuscss.textinput}
            id="message"
            name="message"
            rows="6"
            placeholder="Type your message here..."
          ></textarea>

          <button className={contactuscss.submitbutton} type="submit">
            Submit
          </button>
        </div>

        <div>
          <Map />
        </div>
      </form>
    </div>
  );
}

export default ContactUs;

这是 Map.js 文件中的代码：

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

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

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

  return (
    <GoogleMap
      zoom={10}
      center={{ lat: 44, lng: -80 }}
      mapContainerClassName={{ width: "100%", height: "100vh" }}
    ></GoogleMap>
  );
}

export default Map;

这是我的 .env.local 文件中的内容：

NEXT_PUBLIC_GOOGLE_MAPS_API_KEY="AIzaSyCH4EPZrF5cvUmM9luEsNdOehQuRyJgAzk"

我不太确定出了什么问题 - 我还利用了 youtube 上的最新教程来了解如何将此 API 上传到我的网页。

Answer 1

几乎没有什么需要记住的，因为我也遇到过这个地图库的同样问题。

1. 我看到的第一个错误是，如果您想将内联样式应用于 您需要使用 mapContainerStyle 而不是地图组件 mapContainerClassName 应该是 mapContainerStyle={{...}}.
2. mapContainerClassName 仅接受样式类名称。
3. 即使完成上述更改后，您也看不到地图，然后尝试在样式中给出固定的高度和宽度，因为地图渲染需要它。
4. 在 google 地图 scipt 加载之前不要开始加载。要实现此目的，您可以使用 useLoadScript 挂钩。 useLoadScript 文档

@react-google-maps/api 文档