JS API 结合React使用 最后更新时间: 2024年04月26日

按 NPM 方式安装使用Amap Loader

npm i @amap/amap-jsapi-loader --save

新建 MapContainer.js 文件

在项目中新建 MapContainer.js 文件，用作地图组件脚本。

新建 MapContainer.css 文件

在项目中新建 MapContainer.css 文件，用作地图组件样式。

设置地图容器样式

在 MapContainer.css样式文件中设置地图容器样式

.container{
  padding: 0px;
  margin: 0px;
  width: 100%;
}

引入 JS API  Loader

在 MapContainer.js脚本文件中引入 amap-jsapi-loader依赖

import AMapLoader from '@amap/amap-jsapi-loader';

创建地图组件

在 MapContainer.js脚本文件中初始化地图

React类组件的形式

新建地图类MapComponent，并在render函数创建div标签作为地图容器设置id属性container，添加地图容器样式 height值，完整的代码示例如下：

import React, { Component } from 'react';
import styles from "./MapContainer.css";
import AMapLoader from '@amap/amap-jsapi-loader';

class  MapComponent extends Component{
  constructor(){
    super();      
    this.map = null;
  }
  // 2.dom渲染成功后进行map对象的创建
  componentDidMount(){
    window._AMapSecurityConfig = {
      securityJsCode: "「你申请的安全密钥」",
    };
    AMapLoader.load({
      key:"",                     // 申请好的Web端开发者Key，首次调用 load 时必填
      version:"2.0",              // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins:["AMap.Scale"],     //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    }).then((AMap)=>{
      this.map = new AMap.Map("container",{ //设置地图容器id
        viewMode:"3D",         //是否为3D地图模式
        zoom:5,                //初始化地图级别
        center:[105.602725,37.076636], //初始化地图中心点位置
      });
    }).catch(e=>{
      console.log(e);
    })
  }
  render(){
      // 1.初始化创建地图容器,div标签作为地图容器，同时为该div指定id属性；
      return (
        <div id="container" className={styles.container} style={{ height: '800px' }} > 
        </div>
    );
  }
}
//导出地图组建类
export default MapComponent;

React Hooks组件的形式

import { useEffect } from "react";
import styles from "./MapContainer.css";
import AMapLoader from "@amap/amap-jsapi-loader";

export default function MapContainer() {
  let map = null;

  useEffect(() => {
    window._AMapSecurityConfig = {
      securityJsCode: "「你申请的安全密钥」",
    };
    AMapLoader.load({
      key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
      .then((AMap) => {
        map = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          center: [116.397428, 39.90923], // 初始化地图中心点位置
        });
      })
      .catch((e) => {
        console.log(e);
      });

    return () => {
      map?.destroy();
    };
  }, []);

  return (
    <div
      id="container"
      className={styles.container}
      style={{ height: "800px" }}
    ></div>
  );
}