基于React的Next.js框架使用React-Qmap腾讯地图

在Next.js中使用React-Qmap的步骤

1.安装后，新建个地图组件

yarn add react-qmap 
npm install react-qmap

<ReactQMap
    center={{ latitude: 31.204612, longitude: 121.459724 }}
    apiKey="xxx-xxx-xxx-xxx-xxx-xxx"
    style={{ height: 300px' }}
  />

apiKey 需要去腾讯地图申请

安装 file-loader, url-loader 插件，配置参数
安装 @mdx-js/loader, @next/mdx 插件，安装后可使用自定义webpack Next.js 自定义webpack地址

next.config.js


const withMDX = require('@next/mdx')();

module.exports = withMDX({
  webpack: (config, options) => {
    config.module.rules.push(
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader'
          },
        ],
      },
    )
    return config
  },
});

在需要使用地图组件的页面，使用 Next.js 中的next/dynamic动态引入地图组件，并且暂停SSR服务端渲染

import dynamic from 'next/dynamic';
const Map = dynamic(
  () => import('../../components/map'),
  { ssr: false }
);

若此时还报错，就修改下 react-qmap 的源码，不使用安装的react-qmap，在地图的组件里面修改下引入路径即可

把react-qmap中的 script.crossOrigin = true; 注释掉，再次运行即可

react-qmap github地址可以把案例下载下来，找到自己想要的例子，查看对应代码更改参数配置即可！

** 以上是个人遇到的项目问题，根据自己解决的流程写的，如有不妥请及时沟通，谢谢~**