地图不显示控制台未显示任何错误@react-google-maps/api

Question

所以我正在尝试集成谷歌地图，并且我正在关注一篇博客文章，其中包含有关 next13 typescript 的说明。我一直认为应该显示地图，但什么也不显示。控制台上也没有错误。请帮我解决这个问题

这是nextjs根页面

'use client';

import { useLoadScript } from '@react-google-maps/api';
import React from 'react';
import Ground from '@/app/components/Maps/Ground';

export default function Page() {
  const libraries = React.useMemo(() => ['places', 'routes', 'geocoding'], []);

  const { isLoaded } = useLoadScript({
    googleMapsApiKey: process.env.NEXT_GOOGLE_MAPS_INTEGRATION_API_KEY as string,
    libraries: libraries as any,
  });
  if (!isLoaded) {
    return <div>Loading...</div>;
  }

  return <Ground />;
}

这是渲染地图组件的主页

import React from 'react';
import {
  GoogleMap,
  Marker,
  DirectionsRenderer,
  Circle,
  MarkerClusterer,
} from '@react-google-maps/api';
import { useMantineColorScheme } from '@mantine/core';
import { useLocation } from '@/app/dashboard-home/useLocation';
import { ICoordinates } from '@/interfaces/map';

type LatLngLiteral = google.maps.LatLngLiteral;
type DirectionsResult = google.maps.DirectionsResult;
type MapOptions = google.maps.MapOptions;

export default function Ground() {
  const [baseLocation, setBaseLocation] = React.useState<ICoordinates>();

  const { getUserLocation, errorMsg, loading } = useLocation();
  const { colorScheme } = useMantineColorScheme();

  React.useEffect(() => {
    async function fetchLocationInformation() {
      try {
        const userLocation = await getUserLocation();
        if (userLocation) {
          setBaseLocation(userLocation);
        }
      } catch (error) {
        console.log(errorMsg);
      }
    }
    fetchLocationInformation();
  }, []);

  const mapRef = React.useRef<GoogleMap>();
  const center = React.useMemo<LatLngLiteral | undefined>(
    () => (baseLocation ? { lat: baseLocation.latitude, lng: baseLocation.longitude } : undefined),
    [baseLocation]
  );

  const options = React.useMemo<MapOptions>(
    () => ({
      clickableIcons: true,
      scrollwheel: true,
      mapId: colorScheme === 'dark' ? 'faaa827d36c66866' : '8660e06b8e3da749',
    }),
    [colorScheme]
  );
  const onLoad = React.useCallback((map: any) => {
    mapRef.current = map;
  }, []);

  if (errorMsg) {
    return <div>{errorMsg}</div>;
  }
  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <>
      <GoogleMap
        zoom={8}
        center={center}
        options={options}
        onLoad={onLoad}
        mapContainerStyle={{
          width: '100%',
          height: '100%',
          position: 'relative',
          overflow: 'hidden',
        }}
      >
      </GoogleMap>
    </>
  );
}

我对我的

package.json

进行了一些更改，并添加了分辨率字段，并且“GoogleMap”不能用作 JSX 组件 的错误消失了 我希望我能指出我需要帮助的领域。如果您需要更多代码，请告诉我。我不认为 useLocation()

 钩子很重要，所以发生的事情是它获取设备位置坐标。预先感谢

Answer 1

我不确定如何解决 TypeScript 错误，但我注意到你的环境变量存在问题。

尝试将

process.env.NEXT_GOOGLE_MAPS_INTEGRATION_API_KEY

 替换为 

process.env.NEXT_PUBLIC_GOOGLE_MAPS_INTEGRATION_API_KEY

，记得也要更改 .env 的变量。

在 NextJS 中，您的客户端组件只能读取前缀为

NEXT_PUBLIC_

 的变量，其他变量将被视为私有且只能从后端访问。

Answer 2

样式未正确定义

<GoogleMap
      zoom={14}
      center={center}
      options={options}
      onLoad={onLoad}
      mapContainerStyle={{
        width: '100%',
        height: '100vh',
        position: 'relative',
        overflow: 'hidden',
      }}
    />