JSAPI结合React使用最后更新时间: 2023年01月30日

本章介绍 JSAPI 与 React 结合使用，React 是一个用于构建用户界面的 JavaScript 库，有诸多优点本文可以帮助您轻松的把地图接入到 React 项目中。如果您有更复杂的需求，您同样可以自定义地图组件，然后基于 JSAPI 做高德地图允许你做的一切事情，下面将介绍 JSAPI 基于 React 组件的完整示例。

一、开发准备

1. 首先，注册开发者账号，成为高德开放平台开发者。

2. 登录之后，再进入「应用管理」页面「创建新应用」。

3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」。

4. 添加成功后，可获取到 key 值。

二、地图组件开发和使用

获取高德地图 API，可通过JavaScript 脚本的方式加载和官网提供的 JSAPI Loader 为了更好的契合React使用推荐第二种方式。

1.按 NPM 方式安装使用 Loader ：

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

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

3.首先在 MapContainer.css 样式文件中设置地图容器样式。

CSS

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

4.在 MapContainer.js 文件中开发，代码内容如下：

1）引入react 相关内容

JavaScript

import React, { Component } from 'react';

2）amap-jsapi-loader 引入

JavaScript

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

3）地图组件样式引入

JavaScript

import './MapContainer.css';

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

JavaScript

class  MapComponent extends Component{
    constructor(){
        super();      
        this.map ={};
    }
    // 2.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(){
        // 1.初始化创建地图容器,div标签作为地图容器，同时为该div指定id属性；
        return (
              <div id="container" className="map" style={{ height: '800px' }} > 
              </div>
          );
    }
}
//导出地图组建类
export default MapComponent;

提示：JSAPI Loader 是我们提供的 API 加载器，其加载方式为异步加载JSAPI 内容，所以在使用 AMap对象前需进行验证。这种使用场景下，

JSAPI 不会阻塞页面其他内容的执行和解析，但是 JSAPI 的脚本解析将有可能发生其他脚本资源执行之后，因为需要特别处理，以保证在 AMap对象完整生成之后再调用 JSAPI 的相关接口，否则有可能报错。

6.在完成如上准备工作之后地图组件开发完成，您可将其嵌入其他组件或 APP 中进行开发使用了。

7.可参考完整示例程序。

JSAPI结合React使用 最后更新时间: 2023年01月30日

一、开发准备

二、地图组件开发和使用

JSAPI结合React使用最后更新时间: 2023年01月30日