如何优雅的在React项目中使用高德地图

吐槽君发布于 3年前分类：javascript

目前的使用

1、裸游

(1) 引入高德 JS API

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值">
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

(2)、开发业务逻辑

export default () => {
  const map = useRef<any>();
  const container = useRef<HTMLDivElement>();
  
  useEffect(() => {
    if (container.current) {
      map.current = new AMap.Map(container.current, {
        resizeEnable: true,
        zoom: 16
     })
    }
  }, [container]);
  
  return <div ref={container} />
}

缺点

需要在index.html手动引入高德JS API
存在大量冗余代码，无法跨项目使用

2、使用饿了么 react-amap

(1)、安装

npm install --save react-amap

(2)、使用

import React from 'react';
import ReactDOM from 'react-dom';
import { Map } from 'react-amap';
 
ReactDOM.render(
  <Map amapkey={YOUR_AMAP_KEY} version={VERSION} />,
  document.querySelector('#app')
)

缺点

没有完整的类型定义，使用必须对照文档去开发
维护不积极，最新发布得版本也是两年前的
组件不够丰富，只包含了部分常用的组件

优雅的使用

作为重度TypeScript使用者，类型定义不全绝对不能忍的，所以新造了个轮子 @pansy/react-amap。

文档地址 react-amap-pansyjs.vercel.app

安装

npm install --save @pansy/react-amap

使用

import React from 'react';
import ReactDOM from 'react-dom';
import { Map } from 'react-amap';
 
ReactDOM.render(
  <Map mapKey={YOUR_AMAP_KEY} version={VERSION} />,
  document.querySelector('#app')
)

列举一个具体的列子，介绍 `@pans/react-amap` 的使用。

需求如下：

用户需要在地图上点击，获取坐标点。

实现思路如下:

监听地图的click事件，获取经纬度坐标；
使用Marker组件，渲染标记点；

具体实现代码如下：

import { useState } from 'react';
import { message } from 'antd';
import { Map, Marker } from '@pansy/react-amap';
import type { MapProps } from '@pansy/react-amap/es/map';

export default () => {
  const [position, setPosition] = useState<ReactAMap.Position>();

  const mapEvents: MapProps['events'] = {
    click: (event) => {
      const position: [number, number] = [
        event.lnglat.getLng(), 
        event.lnglat.getLat()
      ];
      message.success(`获取的坐标点位置为${position}`);
      setPosition(position);
    }
  }

  return (
    <div style={{ height: 500 }}>
      <Map events={mapEvents}>
        {position && (
           <Marker position={position} />
        )}
      </Map>
    </div>
  );
};

效果图如下：

目前包含的组件

名称	说明
Map	地图组件
BezierCurve	贝塞尔曲线
BezierCurveEditor	编辑贝塞尔曲线，必须作为BezierCurve的子组件使用
Circle	圆形
CircleEditor	编辑圆形，必须作为Circle的子组件使用
CircleMarker	圆点标记
ContextMenu	地图右键菜单
ControlBar	组合了旋转、倾斜、复位、缩放在内的地图控件, 3D地图使用
Ellipse	椭圆
EllipseEditor	编辑椭圆，必须作为Ellipse的子组件使用
Heatmap	热力图组件
InfoWindow	信息窗体
MapType	地图类型切换插件，用来切换固定的几个常用图层
Marker	单个坐标点
Markers	海量坐标点
MouseTool	鼠标工具
OverView	地图鹰眼
Polygon	在地图上显示多边形
Polyline	在地图上显示折线
PolyEditor	多边形和折线的编辑组件，必须作为其子组件使用
Rectangle	在地图上显示矩形
RectangleEditor	编辑矩形，必须作为Rectangle的子组件使用
Scale	比例尺
ToolBar	工具条

如不满足您的需求，欢迎在 issues 讨论。

我来回复

暂无回复内容