前端 - 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;

Answer 2

看起来你在使用Next.js接入高德地图时遇到了一些问题。首先，让我们解决你提到的“window is not defined”错误。

这个错误通常出现在Next.js的服务器端渲染（SSR）过程中，因为在服务器环境中没有window对象。当Next.js尝试在服务器上渲染组件时，它会尝试访问window对象，从而导致这个错误。

为了解决这个问题，你需要确保高德地图的初始化代码只在客户端执行，而不是在服务器上执行。你可以通过使用typeof window !== 'undefined'来检查window对象是否存在，从而确保代码只在客户端执行。

你的代码中已经包含了这个检查，但是在setAmapLoaded(true)之后，你试图通过this.map来访问地图实例。在函数组件中，你应该使用useRef来创建一个可访问的引用，而不是使用this。

下面是你的代码的修改版，它解决了“window is not defined”错误，并使用了useRef来创建地图实例的引用：

import { useState, useEffect, useRef } from 'react';function MapComponent() {  const [amapLoaded, setAmapLoaded] = useState(false);  const mapRef = useRef(null);  useEffect(() => {    if (typeof window !== 'undefined') {      import('@amap/amap-jsapi-loader').then(AMapLoader => {        AMapLoader.load({          key: '282cd9041593e8c30e5df2e2fcd17984',          version: '2.0',        }).then(() => {          setAmapLoaded(true);          if (mapRef.current) {            const map = new AMap.Map(mapRef.current, {              viewMode: '3D',              zoom: 5,              center: [105.602725, 22.076636],            });          }        });      });    }  }, []);  return (    <>      <div id="container" className="map-container" style={{ height: '600px', width: '880px' }} ref={mapRef} />    </>  );}export default MapComponent;

接下来，关于你提到的页面报错问题，你没有提供足够的错误信息来确定问题的具体原因。不过，从你给出的截图来看，报错信息似乎与高德地图的API有关。

确保你的高德地图API密钥是正确的，并且没有被限制使用。另外，检查你的网络请求是否受到任何限制或阻塞，这可能导致高德地图的API无法正确加载。

如果问题仍然存在，你可以尝试在浏览器的开发者工具中查看更详细的错误信息，这将有助于进一步诊断问题。

希望这些解决方案能帮到你！如果你还有其他问题或需要进一步的帮助，请随时提问。