[ Map, Marker ] WebGL Uncaught Error: Not initialized. - Next js

未关闭
  • 哪里不对？
#641 1 条评论 3 个 reaction 已指派 1 人 在 GitHub 查看

@wangela 已经在做这个了。

开始于 2023年3月20日。

评估

这个 Issue 还没有评估数据。

描述

triage me type: bug

Thanks for stopping by to let us know something could be better!

PLEASE READ

If you have a support contract with Google, please create an issue in the support console. This will ensure a timely response.

Discover additional support services for the Google Maps Platform, including developer communities, technical guidance, and expert support at the Google Maps Platform support resources page.

If your bug or feature request is not related to this particular library, please visit the Google Maps Platform issue trackers.

Check for answers on StackOverflow with the google-maps tag.

Please be sure to include as much information as possible:

Environment details
  1. Specify the API at the beginning of the title (for example, "Places: ...")
  2. OS type and version
  3. Library version and other environment information
Steps to reproduce
  1. Refresh
Code example

_app.tsx

<Wrapper
      apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY as string}
      version={"beta"}
      libraries={["marker"]}
    >
      <RecoilRoot>
        <QueryClientProvider client={queryClient}>
          <AuthWrapper {...props} />
        </QueryClientProvider>
      </RecoilRoot>
    </Wrapper>

some_page.tsx

<Map
          style={{ width: "100%", height: "calc(100vh - 56px - 48px)" }}
          center={{ lat: 37.541, lng: 126.986 }}
          zoom={10}
          disableDefaultUI={true}
          zoomControl={true}
          gestureHandling="greedy"
          mapId={"ffd73acbe75007f4"}
        >
          <MapMarker
            position={{ lat: 37.541, lng: 126.986 }}
            title={"Pin"}
            onClick={(marker, latLng) => console.info(marker, latLng)}
          />
        </Map>
      </div>

Map.tsx

import { useDeepCompareEffectForMaps } from "@/hooks/useDeepCompareEffectForMaps";
import React from "react";
import useDeepCompareEffect from "use-deep-compare-effect";

type MapProps = {
  style: { [key: string]: string };
  onClick?: (e: google.maps.MapMouseEvent) => void;
  onIdle?: (map: google.maps.Map) => void;
} & google.maps.MapOptions &
  React.PropsWithChildren;

const Map = ({ onClick, onIdle, children, style, ...options }: MapProps) => {
  const ref = React.useRef<HTMLDivElement>(null);
  const [map, setMap] = React.useState<google.maps.Map>();

  React.useEffect(() => {
    if (ref.current && !map) {
      setMap(new window.google.maps.Map(ref.current, options));
    }
  }, [ref, map]);

  useDeepCompareEffectForMaps(() => {
    if (map) {
      map.setOptions(options);
    }
  }, [map, options]);

  React.useEffect(() => {
    if (map) {
      ["click", "idle"].forEach((eventName) =>
        google.maps.event.clearListeners(map, eventName)
      );

      if (onClick) {
        map.addListener("click", onClick);
      }

      if (onIdle) {
        map.addListener("idle", () => onIdle(map));
      }
    }
  }, [map, onClick, onIdle]);
  // [END maps_react_map_component_event_hooks]

  // [START maps_react_map_component_return]
  return (
    <>
      <div ref={ref} style={style} />
      {React.Children.map(children, (child) => {
        if (React.isValidElement(child)) {
          // set the map prop on the child component
          // @ts-ignore
          return React.cloneElement(child, { map });
        }
      })}
    </>
  );
};

export default Map;
Stack trace
Uncaught Error: Not initialized.
    at aZ (webgl.js:182:509)
    at D8a.wj (webgl.js:965:13)
    at C8a.wj (webgl.js:551:262)
    at B8a.m (webgl.js:552:228)
    at Sla (map.js:18:28)
    at Rla (map.js:19:203)
    at Ru (map.js:16:496)
    at Object.Lj (map.js:62:233)
    at HTMLDivElement.<anonymous> (common.js:210:701)

Following these steps will guarantee the quickest resolution possible.

Thanks!

主要语言
TypeScript
星标
381
派生
50
30 天内没有已合并 PR

环境准备

  • 没有 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

googlemaps/react-wrapper 的其他 Issue

查看 googlemaps/react-wrapper 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。