标记未在 localhost next.js 上显示 @react-google-maps/api答案

【问题标题】：Marker not showing @react-google-maps/api on localhost next.js标记未在 localhost next.js 上显示 @react-google-maps/api
【发布时间】：2022-07-27 01:18:50
【问题描述】：

我知道有类似的问题......但没有人回答我的问题

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

这是我的组件

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 的控制台日志返回以下内容

控制台没有错误

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

任何帮助将不胜感激

【问题讨论】：

我遇到了同样的问题。你解决了吗？
@SurajRegmi 这似乎只发生在本地主机上 - 一旦我将我的应用程序上线，标记就会出现
@SmokeyDawson 我面临同样的问题，在本地主机上仍然没有运气？你确定它在构建时没问题？
@AshArchin 它在我的网站上肯定对我有用，但我不能确定它是否对你有用。最好的办法是将您的网站上传到某个地方并查看。

标签： javascript reactjs react-google-maps

【解决方案1】：

您遇到的问题是 React 18 引入的与严格模式相关的问题。如果您从应用程序中删除严格模式，则应该会出现标记。这也解释了为什么 Smokey Dawson 的应用可以在生产环境中运行——我猜他们移除了严格模式。

这里有一些关于它的文档，来自 repo 的已关闭问题：https://github.com/JustFly1984/react-google-maps-api/issues/2978

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

【讨论】：

【解决方案2】：

我在使用@react-google-maps/api@2.10.2时遇到了同样的问题

为了解决我降级到@react-google-maps/api@2.7.0的问题

【讨论】：

【解决方案3】：

对于 react 18+，您可以导入 MarkerF 而不是 Marker

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

【讨论】：

【解决方案4】：

我是这样实现的：

这可能是因为你没有指定 position 属性，大多数时候它的坐标与中心坐标相同。

  const markerCoors = {
    lat: x,
    lng: y,
  };

【讨论】：