JS API 结合React使用 最后更新时间: 2023年03月30日
本章介绍 JS API 与 React 结合使用,React 是一个用于构建用户界面的 JavaScript 库,有诸多优点本文可以帮助您轻松的把地图接入到 React 项目中。如果您有更复杂的需求,您同样可以自定义地图组件,然后基于 JS API 做高德地图允许你做的一切事情,下面将介绍 JS API 基于 React 组件的完整示例。
提示
您在2021年12月02日以后申请的 key 需要配合您的安全密钥一起使用。
准备
成为开发者并创建 key
为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作。
开发一个地图组件
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
添加依赖
引入 React 相关依赖
import React, { Component } from 'react';
amap-jsapi-loader 引入
import AMapLoader from '@amap/amap-jsapi-loader';
地图组件样式引入
import './MapContainer.css';
5
创建地图组件
新建地图类MapComponent,并在render函数创建<div>标签作为地图容器设置id属性container,添加地图容器样式 height值,完整的代码示例如下:
class MapComponent extends Component {
constructor() {
super();
this.map = {};
}
// 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() {
// 初始化创建地图容器,div标签作为地图容器,同时为该div指定id属性;
return <div id="container" className="map" style={{ height: '800px' }}></div>;
}
}
// 导出地图组建类
export default MapComponent;
提示
JS API Loader 是我们提供的 API 加载器,其加载方式为异步加载 JS API 内容,所以在使用 AMap对象前需进行验证。这种使用场景下,JS API 不会阻塞页面其他内容的执行和解析,但是 JS API 的脚本解析将有可能发生其他脚本资源执行之后,因为需要特别处理,以保证在 AMap对象完整生成之后再调用 JS API 的相关接口,否则有可能报错。