【问题记录-next】地图next map-container.tsx?cb48:16 Uncaught ReferenceError: AMap is not defined

在next.js项目里引用高德地图时，遇到一个问题报错：

next  map-container.tsx?cb48:16 Uncaught ReferenceError: AMap is not defined

在网上搜了很多方法都没有解决掉，
最后发现，是我写法有问题……

错误写法：

import { Map, APILoader,Marker } from '@uiw/react-amap'
import styles from '../../styles/Home.module.scss'


const MapContainer = () => {
  return (
    <APILoader akay="key">
        <Map
            center={[xxx,yyyy]}
            zoom={16}
          >
            <Marker
              label={{
                offset: new AMap.Pixel(20, 20),
                content: `<div class=${styles.zkwlMaker}>xxx商务楼</div>`,
                direction: 'top'
              }}
              position={new AMap.LngLat(xxx,yyyy)}
            />
          </Map>
    </APILoader>
  )
}
export default MapContainer;

把map里面的内容提出来写，就好了：

import { Map, APILoader,Marker } from '@uiw/react-amap'
import styles from '../../styles/Home.module.scss'

const Mark =  () => {
  return(
    <div className={styles.map} style={{ width: '100%', height: '360px', position:"relative"}}>
      <Map
          center={[120.67,31.2875]}
          zoom={16}
        >
          <Marker
            label={{
              offset: new AMap.Pixel(0, -10),
              content: `<div class=${styles.zkwlMaker}>xxx商务楼</div>`,
              direction: 'top'
            }}
            position={new AMap.LngLat(120.666282,31.2874259)}
          />
        </Map>
      </div>
  )
}

const MapContainer = () => {
  return (
    <APILoader akay="key">
      <Mark />
    </APILoader>
  )
}
export default MapContainer;

分析：
组件是自动判断是否加载高德地图SDK，如果全局存在AMap对象就不加在SDK，加载完成之后，全局会有window.AMap.
用实例直接使用AMap对象，SDK没有开始加载，所以直接报错。要分开写。

如果想写在一起，参考这个：特殊使用方法