开发 地图 JS API 2.0 进阶教程 基础 JS API 结合 React 使用

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

功能介绍

       React 可以改变你对可见设计和应用构建的思考。当你使用 React 构建用户界面时,你首先会把它分解成一个个 组件,然后,你需要把这些组件连接在一起,使数据流经它们。

       本章教程将介绍如何在 React 中使用自定义组件的方式结合 JS API 加载、创建和销毁地图。

应用场景

如果您的项目是使用 React 框架,建议您将地图的初始化封装成组件,这样更便于使用 React 组件的生命周期来加载、创建和销毁地图。

Demo示例

使用说明

准备

成为开发者并创建 key

为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作

提示

您在2021年12月02日以后申请的 key 需要配合您的安全密钥一起使用。

开发一个地图组件

1

按 NPM 方式安装使用Amap Loader

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

新建 MapContainer.js 文件

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

3

新建 MapContainer.css 文件

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

4

设置地图容器样式

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

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

引入 JS API  Loader

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

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

创建地图组件

在 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(){
    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={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(() => {
    AMapLoader.load({
      key: "", // 申请好的Web端开发者Key,首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表,如比例尺'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>
  );
}
提示

JS API Loader 是我们提供的 API 加载器,其加载方式为异步加载JS API 内容,所以在使用 AMap对象前需进行验证。这种使用场景下,JS API 不会阻塞页面其他内容的执行和解析,但是 JS API 的脚本解析将有可能发生其他脚本资源执行之后,因为需要特别处理,以保证在 AMap对象完整生成之后再调用 JS API 的相关接口,否则有可能报错。

返回顶部 示例中心 常见问题 智能客服 公众号
二维码