The React-based Next-js framework uses the React-Qmap Tencent map

Use the react-qmap steps in next.js

1. After installation, create a map component

yarn add react-qmap 
npm install react-qmap
Copy the code

<ReactQMap Center ={{latitude: 31.204612, longitude: 121.459724}} apiKey=" xxx-XXX-xxx-xxx-xxx "style={{height: height 300px' }} />Copy the code

ApiKey needs to go to Tencent Map for application

2. Install file-loader, url-loader plug-in, and set parameters

3. Install @mdX-js /loader, @next/ MDX plug-in, after installation can use custom Webpack

Next. Js custom Webpack address

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
  },
});

Copy the code

4. Use Next/Dynamic in next.js to dynamically introduce the map component on pages that need to use it, and pause SSR server rendering

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

5. Install the react-qmap component and change the import path in the map component

CrossOrigin = true; Comment it out and run it again

The react-qmap github address can be used to download the example, find the example you want, check the corresponding code to change the parameter configuration.

** The above is a personal project problem, according to their own process to solve the writing, if there is any problem, please timely contact, thank you ~**