基于 React 封装的高德地图组件，帮助你轻松的接入地图到 React 项目中。
2024-08-21 01:53:09
react-amap 这是一个基于 React 封装的高德地图组件，帮助你轻松的接入地图到 React 项目中。
文档实例预览: Github Web | Gitee Web
特性
- ️ 自动加载高德地图 SDK（通过创建 Script 标签的形式加载），包括第三方 SDK。
- 使用 Typescript 编写，集成高德地图 SDK @type 声明文件（包括中文注释）。
- ⚛️ 支持 React Hook 新增特性（需要 React 16.8+）。
- 不依赖任何第三方组件。
安装
不依赖
uiw组件库
npm install @uiw/react-amap --save
使用
import { Map, APILoader } from '@uiw/react-amap';
const Demo = () => (
<div style={{ width: '100%', height: '300px' }}>
<APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
<Map />
</APILoader>
</div>
);
ReactDOM.render(<Demo />, _mount_);
Map 组件
Map 组件是其他组件的基础，Map 组件会给所有的子组件注入两个属性 map，container 和 AMap，
️ 注意
- 组件
<Map>必须包裹在<APILoader>组件内，该组件作用是加载高德地图 SDK。- 其他地图组件必须作为
<Map>的子组件使用；
import { Map, APILoader } from '@uiw/react-amap';
基本用法
Map 的父组件必须具有宽度和高度；
import React from 'react';
import { Map, APILoader } from '@uiw/react-amap';
const Demo = () => (
<div style={{ width: '100%', height: '300px' }}>
<APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
<Map />
</APILoader>
</div>
);
ReactDOM.render(<Demo />, _mount_);
参数设置
import React, { Fragment } from 'react';
import { Map, APILoader } from '@uiw/react-amap';
function Demo() {
const [dragEnable, setDragEnable] = useState(true);
const [display, setDisplay] = useState(true);
const [zoom, setZoom] = useState(15);
const [viewMode, setViewMode] = useState('3D');
return (
<Fragment>
<button onClick={() => setDragEnable(!dragEnable)}>{dragEnable ? '禁用' : '启用'}拖拽</button>
<button onClick={() => setDisplay(!display)}>{display ? '卸载' : '加载'}地图</button>
<button onClick={() => setViewMode(viewMode === '3D' ? '2D' : '3D')}>{viewMode}地图</button>
<button onClick={() => setZoom(zoom + 1)}>放大 +1 -> ({zoom})</button>
<button onClick={() => setZoom(zoom - 1)}>缩小 -1 -> ({zoom})</button>
<div style={{ width: '100%', height: 350 }}>
{display && (
<Map
dragEnable={dragEnable}
zoom={zoom}
viewMode={viewMode}
pitch={viewMode === '2D' ? 0 : 70}
/>
)}
</div>
</Fragment>
);
}
ReactDOM.render((
<APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
<Demo />
</APILoader>
), _mount_);
Ref
获取地图实例对象。
import React, { useEffect, useRef, Fragment } from 'react';
import { Map, APILoader } from '@uiw/react-amap';
function Demo() {
const mapRef = useRef();
useEffect(() => {
console.log('mapRef:', mapRef)
}, []);
return (
<div style={{ width: '100%', height: 330 }}>
<Map
layers={[new AMap.TileLayer.Satellite()]}
ref={(instance) => {
if (instance && instance.map) {
const bounds = instance.map.getBounds();
console.log('instance', instance);
}
}}
/>
<Map
layers={[new AMap.TileLayer.Satellite()]}
ref={mapRef}
/>
</div>
);
}
ReactDOM.render((
<APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
<Demo />
</APILoader>
), _mount_);
事件触发
import React from 'react';
import { Map, APILoader } from '@uiw/react-amap';
const Demo = () => (
<div style={{ width: '100%', height: '300px' }}>
<APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
<Map
onComplete={(data, de) => {
console.log('地图加载完成！', data, de);
}}
onClick={() => {
console.log('点击事件！');
}}
/>
</APILoader>
</div>
);
ReactDOM.render(<Demo />, _mount_);
最新文章
- vue+webpack实践
- SqlServer查询表中各列名称、表中列数
- JS/CSS缓存杀手——VS插件
- (转)dp和dip是同一个单位
- Telegram传奇：俄罗斯富豪、黑客高手、极权和阴谋…
- 在windows下用cygwin和eclipse搭建cocos2dx的android开发环境
- HDU2015校赛 The Country List
- 基于jquery扩展漂亮的分页控件（ajax）
- JavaScript 超类与子类 继承
- 正确AJAX了解该技术的，创建，应用
- mpich2 下运行时出现“由于目标计算机积极拒绝，无法连接”的错误
- [翻译] Tensorflow模型的保存与恢复
- FFMPEG类库打开流媒体的方法（需要传参数的时候）
- Redis缓存你必须了解的！
- centos docker 升级至最新稳定版--摘自官网
- Hive如何处理小文件问题？
- SWIT2019无线通信和信息技术国际研讨会（上海）
- 文件和IO流
- pypyodbc 的坑
- Python文本处理