基于React封装的⾼德地图组件，帮助你轻松的接⼊地图到React项⽬
中。
react-amap 这是⼀个基于 React 封装的⾼德地图组件，帮助你轻松的接⼊地图到 React 项⽬中。除了必须引⽤的 APILoader/Map 组件外，我们⽬前提供了最常⽤的地图组件，能满⾜⼤部分简单的业务场景；如果你有更复杂的需求，或者觉得默认提供的组件功能不够，可以使⽤Map 组件返回的地图实例，完全⾃定义⼀个地图组件，然后根据⾼德原⽣ API 做⾼德允许你做的⼀切事情。
⽂档实例预览: |
特性
♻ ⾃动加载⾼德地图 SDK（通过创建 Script 标签的形式加载），包括第三⽅ SDK。
使⽤ Typescript 编写，集成⾼德地图 SDK 声明⽂件（包括中⽂注释）。
⚛ ⽀持 React Hook 新增特性（需要 React 16.8+）。
不依赖任何第三⽅组件。
安装
不依赖组件库
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>
)耐克react和zoom
;
Map 组件
Map 组件是其他组件的基础，Map 组件会给所有的⼦组件注⼊两个属性map，container和AMap，
⚠ 注意
1. 组件<Map>必须包裹在<APILoader>组件内，该组件作⽤是加载⾼德地图 SDK。
2. 其他地图组件必须作为<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>
);
参数设置
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>
);
}
<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 = Bounds();
console.log('instance', instance);
}
}}
/>
<Map
layers={[new AMap.TileLayer.Satellite()]}
ref={mapRef}
/>
</div>
)
;
}
<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>
);
APILoader
⽤于加载⾼德地图 SDK 依赖，加载完成，全局将会有window.AMap对象。
import { 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>
);
多个地图
import React from 'react';
import { Map, APILoader } from '@uiw/react-amap';
const Demo = () => (
<div style={{ width: '100%', height: 300 }}>
<APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
<Map style={{ height: 100, marginBottom: 10 }} />
<div style={{ border: '1px solid red' }}>
<Map style={{ height: 100 }} />
</div>
</APILoader>
</div>
);
Marker 点标记组件
点标记是⽤来标⽰某个位置点信息的⼀种地图要素，本章介绍如何在地图图⾯使⽤点标记。
import { Marker } from '@uiw/react-amap';
基本⽤法
import React, { useState, useRef } from 'react';
import { Map, APILoader, Marker } from '@uiw/react-amap';
const Example = () => {
const [show, setShow] = useState(true);
return (
<>
<button onClick={() => setShow(!show)}>
{show ? '隐藏' : '显⽰'}
</button>
<div style={{ width: '100%', height: '300px' }}>
<Map zoom={4}>
<Marker visiable={show} title="北京市" position={new AMap.LngLat(116.405285,39.904989)} />
<Marker visiable={show} title="天津市" position={new AMap.LngLat(117.190182,39.125596)} />
<Marker visiable={show} title="河北省" position={new AMap.LngLat(114.502461,38.045474)} />
<Marker visiable={show} title="⼭西省" position={new AMap.LngLat(112.549248,37.857014)} />
<Marker visiable={show} title="内蒙古⾃治区" position={new AMap.LngLat(111.670801,40.818311)} />
<Marker visiable={show} title="辽宁省" position={new AMap.LngLat(123.429096,41.796767)} />
<Marker visiable={show} title="吉林省" position={new AMap.LngLat(125.3245,43.886841)} />
<Marker visiable={show} title="⿊龙江省" position={new AMap.LngLat(126.642464,45.756967)} />
<Marker visiable={show} title="上海市" position={new AMap.LngLat(121.472644,31.231706)} />
<Marker visiable={show} title="江苏省" position={new AMap.LngLat(118.767413,32.041544)} />
<Marker visiable={show} title="浙江省" position={new AMap.LngLat(120.153576,30.287459)} />
<Marker visiable={show} title="安徽省" position={new AMap.LngLat(117.283042,31.86119)} />
<Marker visiable={show} title="福建省" position={new AMap.LngLat(119.306239,26.075302)} />
<Marker visiable={show} title="江西省" position={new AMap.LngLat(115.892151,28.676493)} />
<Marker visiable={show} title="⼭东省" position={new AMap.LngLat(117.000923,36.675807)} />
<Marker visiable={show} title="河南省" position={new AMap.LngLat(113.665412,34.757975)} />
<Marker visiable={show} title="湖北省" position={new AMap.LngLat(114.298572,30.584355)} />
<Marker visiable={show} title="湖南省" position={new AMap.LngLat(112.982279,28.19409)} />
<Marker visiable={show} title="⼴东省" position={new AMap.LngLat(113.280637,23.125178)} />
<Marker visiable={show} title="⼴西壮族⾃治区" position={new AMap.LngLat(108.320004,22.82402)} /> <Marker visiable={show} title="海南省" position={new AMap.LngLat(110.33119,20.031971)} />
<Marker visiable={show} title="重庆市" position={new AMap.LngLat(106.504962,29.533155)} />
<Marker visiable={show} title="四川省" position={new AMap.LngLat(104.065735,30.659462)} />
<Marker visiable={show} title="贵州省" position={new AMap.LngLat(106.713478,26.578343)} />
<Marker visiable={show} title="云南省" position={new AMap.LngLat(102.712251,25.040609)} />
<Marker visiable={show} title="西藏⾃治区" position={new AMap.LngLat(91.132212,29.660361)} />
<Marker visiable={show} title="陕西省" position={new AMap.LngLat(108.948024,34.263161)} />
<Marker visiable={show} title="⽢肃省" position={new AMap.LngLat(103.823557,36.058039)} />
<Marker visiable={show} title="青海省" position={new AMap.LngLat(101.778916,36.623178)} />
<Marker visiable={show} title="宁夏回族⾃治区" position={new AMap.LngLat(106.278179,38.46637)} /> <Marker visiable={show} title="新疆维吾尔⾃治区" position={new AMap.LngLat(87.617733,43.
792818)} /> <Marker visiable={show} title="台湾省" position={new AMap.LngLat(121.509062,25.044332)} />
<Marker visiable={show} title="⾹港特別⾏政區" position={new AMap.LngLat(114.173355,22.320048)} /> <Marker visiable={show} title="澳⾨特別⾏政區" position={new AMap.LngLat(113.54909,22.198951)} /> </Map>
</div>
</>
);
}
<APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
<Example />
</APILoader>
), _mount_);
点标注的⽂本标签
发表评论