JS API 结合React使用 最后更新时间: 2023年03月30日

NPM 安装 Loader 

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

新建脚本和样式文件

在 React 项目中新建一个地图组件，需要在项目目录新建 MapContainer.js  脚本文件和新建 MapContainer.css 样式文件。

设置地图容器样式

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

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

添加依赖

引入 React 相关依赖

import React, { Component } from 'react';

amap-jsapi-loader 引入

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

地图组件样式引入

import './MapContainer.css';

创建地图组件

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

class MapComponent extends Component {
  constructor() {
    super();
    this.map = {};
  }

  // dom渲染成功后进行map对象的创建
  componentDidMount() {
    AMapLoader.load({
      key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [''], // 需要使用的的插件列表，如比例尺'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() {
    // 初始化创建地图容器,div标签作为地图容器，同时为该div指定id属性；
    return <div id="container" className="map" style={{ height: '800px' }}></div>;
  }
}
// 导出地图组建类
export default MapComponent;