下载 npm i @amap/amap-jsapi-loader --save
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';
React类组件的形式完整代码
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;
函数组件完整代码
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>
);
}
以上只是最基础的代码