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

下载 React 类组件完整代码

下载 React Hooks 组件完整代码

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

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

按 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>
 );
}