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

我心飞翔 分类:javascript

Ra822003727c112b0aec94fb30e7a7554.jpeg

目前的使用

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

Apr-15-2021 17-45-39.gif

安装

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 的使用。

需求如下:

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

实现思路如下:

  1. 监听地图的click事件,获取经纬度坐标;
  2. 使用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>
  );
};

 

效果图如下:

Apr-15-2021 18-10-58.gif

目前包含的组件

名称 说明
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 讨论。

回复

我来回复
  • 暂无回复内容