您现在的位置: 开发 > 地图 JS API v2.0 > 教程 > JSAPI与前端框架结合 > JSAPI结合React使用
前往查看新版文档

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 样式文件中设置地图容器样式。

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

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

1)引入react 相关内容

import React, { Component } from 'react';

2)amap-jsapi-loader 引入

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

3)地图组件样式引入

import './MapContainer.css';

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

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.可参考完整示例程序。 

示例
中心
常见
问题
智能
客服