nextjs 接入高德地图？

Question

请教一下大佬们，按照官方的例子（官方只有 react 的例子），遇到了window is not defined报错，然后百度发现了一个相同的用户
https://juejin.cn/post/7229984415329108024
但是， 我按照他的方法接入是不报错了， 但是一直也没有正常显示出来

===================updated=============
好像我把他的amapLoaded变量判断去掉同时给 div 设置一个宽高，就可以展示了
代码如下

import { useState, useEffect } from 'react';

function MapComponent() {
  const [amapLoaded, setAmapLoaded] = useState(false)
  useEffect(() => {
    if (typeof window !== "undefined") {
      import('@amap/amap-jsapi-loader').then(AMapLoader => {
        AMapLoader.load({
          key: '282cd9041593e8c30e5df2e2fcd17984',
          version: '2.0',
        }).then(() => {
          setAmapLoaded(true)
          this.map = new AMap.Map('container', {
            // 设置地图容器id
            viewMode: '3D', // 是否为3D地图模式
            zoom: 5, // 初始化地图级别
            center: [105.602725, 22.076636], // 初始化地图中心点位置
          });
         
        })
      })
    }
  }, [])

  return (
    <>
      { <div id="container" className="map-container" style={{height: "600px", width: "880px"}}/>}
    </>
  );
}

export default MapComponent;

但是页面有一个报错。
为啥会报这个错，为啥还能展示

Answer 1

react hooks已经不用this了，换成useRef了。

import { useRef, useState, useEffect } from 'react';

function MapComponent() {
  const mapRef = useRef(null)
  const [amapLoaded, setAmapLoaded] = useState(false)
  
  useEffect(() => {
    if (typeof window !== "undefined") {
      import('@amap/amap-jsapi-loader').then(AMapLoader => {
        AMapLoader.load({
          key: '282cd9041593e8c30e5df2e2fcd17984',
          version: '2.0',
        }).then(() => {
          setAmapLoaded(true)
          mapRef.current = new AMap.Map('container', {
            // 设置地图容器id
            viewMode: '3D', // 是否为3D地图模式
            zoom: 5, // 初始化地图级别
            center: [105.602725, 22.076636], // 初始化地图中心点位置
          });
        })
      })
    }
  }, [])

  return (
    <>
      { <div id="container" className="map-container" style={{height: "600px", width: "880px"}}/>}
    </>
  );
}

export default MapComponent;