标记未在本地主机 next.js 上显示 @react-google-maps/api

Question

我知道有类似的问题...但没有任何答案可以回答我的问题

我正在尝试向我的谷歌地图添加一个标记，但当我在本地运行该项目时它没有显示（在我的实时站点上它工作正常）

这是我的组件

import { React, useMemo } from "react";

import { GoogleMap, Marker, useJsApiLoader } from "@react-google-maps/api";

import MapContainerStyles from "./styles/MapContainerStyles";

const Map = () => {
  const { isLoaded } = useJsApiLoader({
    googleMapsApiKey: API_KEY,
  });

  const center = useMemo(() => ({ lat: -30.292038, lng: 153.118896 }), []);

  const onLoad = (marker) => {
    console.log("marker: ", marker);
  };


  const options = {
    mapTypeControl: false,
    streetViewControl: false,
    fullscreenControl: false,
  };

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

  return (
      <GoogleMap zoom={15} options={options} center={center} mapContainerClassName="map-container">
        <Marker onLoad={onLoad} position={center} />
      </GoogleMap>
  );
};

export default Map;

onLoad 标记的控制台日志返回以下内容

控制台中没有错误

我查看了多个资源，看起来好像我做的一切都是正确的..但标记没有显示

任何帮助，将不胜感激

Answer 1

对于 React 18+，你必须导入MarkerF而不是 Marker 并将其用作标签（当然）

import {MarkerF} from '@react-google-maps/api'

来源

Answer 2

您遇到的问题是 React 18 引入的与严格模式相关的问题。如果您从应用程序中删除严格模式，则应该出现标记。这也解释了为什么 Smokey Dawson\ 的应用程序在生产 \xe2\x80\x94 中工作，我猜他们删除了严格模式。

\n

这是存储库中一个已解决问题中有关它的一些文档：https://github.com/JustFly1984/react-google-maps-api/issues/2978

\n

希望你已经解决了这个问题，但如果没有，我想我会回答它，因为本周我遇到了同样的问题。

\n