nextjs+高德地图 样式问题

Question

nextjs 引入高德地图Amap 路由切换地图样式乱了

很简单的引用 但是路由切换地图就会有问题

import * as React from 'react';
import { Toast } from 'antd-mobile';
import { useState, useEffect, useRef } from 'react';
import dynamic from 'next/dynamic';
import Router, { useRouter } from 'next/router';
import styles from './index.module.scss'
// 地图要使用windows对象，所以用dynamic 
const Amap = dynamic(import('../../components/testAmap'), { ssr: false });
const TestMap = () => {
    const [locInfo, setlocInfo] = useState({});

 
    return (<div>
        <div onClick={() => Router.back()}>返回</div> 
        <div >
            <Amap locInfo={locInfo} />
        </div>
    </div >)

}
export default TestMap;

//Amap:

import React, { useState} from 'react';
import { APILoader, Map, Geolocation, Marker } from '@uiw/react-amap'; 
const Amapwithmap = () => {
  const [data, setData] = useState({}); 

 
  return (
    <> 
      <div className={styles.map_container}>
        <div style={{ width: '100%', height: '200px' }}>
          <Map zoom={10}> 
          </Map>
        </div>
        <pre style={{ padding: 10, marginTop: 10 }}>
          {data ? JSON.stringify(data, null, 2) : '{正在获取}'}
        </pre>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Amapwithmap />
  </APILoader>
);

export default Mount;

只要一点返回再回来 地图组件size就崩了 外层div框不住了

有没有人遇到过这个奇葩的问题啊

Answer 1

这种情况可能是因为高德地图的样式被重新计算导致的，您可以尝试在页面加载完成后重新计算一下地图的大小和样式。

可以使用useEffect钩子函数来监听路由变化，并在路由变化后重新计算地图的大小和样式。具体代码如下：

import * as React from 'react';
import { Toast } from 'antd-mobile';
import { useState, useEffect, useRef } from 'react';
import dynamic from 'next/dynamic';
import Router, { useRouter } from 'next/router';
import styles from './index.module.scss'
// 地图要使用windows对象，所以用dynamic 
const Amap = dynamic(import('../../components/testAmap'), { ssr: false });

const TestMap = () => {
    const [locInfo, setlocInfo] = useState({});

    // 监听路由变化
    useEffect(() => {
        const handleRouteChange = () => {
            // 重新计算地图大小和样式
            window.AMap && window.AMap.event.trigger(window.map, 'resize');
        };
        Router.events.on('routeChangeComplete', handleRouteChange);
        return () => {
            Router.events.off('routeChangeComplete', handleRouteChange);
        };
    }, []);

    return (
        <div>
            <div onClick={() => Router.back()}>返回</div> 
            <div >
                <Amap locInfo={locInfo} />
            </div>
        </div>
    )
}

export default TestMap;

在上述代码中，我们使用了Router.events来监听路由变化事件，每当路由切换完毕时会执行回调函数handleRouteChange，在该回调函数中重新计算地图的大小和样式。

希望这个方法能解决您的问题。