在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没有开始加载,所以直接报错。要分开写。
如果想写在一起,参考这个:特殊使用方法