介绍

AMap-React 是一个基于 React.js 的高德地图 AMap JSAPI 封装。

通过它，你能够以近似普通 UI 组件的方式来开发地图应用，而无需关心 AMap 的具体操作。

依托于 React 的组件化机制，你可以对地图、地图上的各种覆盖物、图层进行组件化的开发。例如

<div className="my-map">
  <Amap center={[...]} zoom={13}>
    <Marker
      position={[116.473179, 39.993169]}
      label={{ content: 'Hello, AMap-React!', direction: 'bottom' }}
      onClick={onMarkerClick}
    />
  </Amap>
</div>

与此同时，AMap-React 会透明地管理地图相关组件的生命周期，你可以使用熟悉的{ condition && <Component /> }等方式来声明式地开发应用。例如

{
  focusPoint && <Marker position={focusPoint.position} />
}

AMap-React 组件封装了对应 AMap 组件的大部分属性和事件，同时你也可以通过ref获得组件实例，来命令式地调用它们的方法，如AMap.Map的setFitView、AMap.Marker的moveTo等（参考获取组件 ref）。例如

const $marker = useRef();

function play() {
  $marker.current && $marker.current.moveTo(targetPos, 1000);
}

继续阅读