{"id":21229763,"url":"https://github.com/pansyjs/react-amap","last_synced_at":"2025-04-05T16:09:50.117Z","repository":{"id":36558867,"uuid":"351348795","full_name":"pansyjs/react-amap","owner":"pansyjs","description":"基于 React 封装的高德地图组件，助你轻松的接入高德地图到 React 项目中。","archived":false,"fork":false,"pushed_at":"2025-03-25T02:11:58.000Z","size":27920,"stargazers_count":106,"open_issues_count":12,"forks_count":17,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-29T15:10:02.962Z","etag":null,"topics":["amap","component","map","react","react-component","typescript"],"latest_commit_sha":null,"homepage":"https://amap.xingkang.wang","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pansyjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-25T07:40:22.000Z","updated_at":"2025-02-13T03:01:45.000Z","dependencies_parsed_at":"2023-12-26T04:22:29.471Z","dependency_job_id":"875a758f-8617-4b4b-bb10-b1423b17cbca","html_url":"https://github.com/pansyjs/react-amap","commit_stats":null,"previous_names":[],"tags_count":190,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pansyjs%2Freact-amap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pansyjs%2Freact-amap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pansyjs%2Freact-amap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pansyjs%2Freact-amap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pansyjs","download_url":"https://codeload.github.com/pansyjs/react-amap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247361693,"owners_count":20926643,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["amap","component","map","react","react-component","typescript"],"created_at":"2024-11-20T23:29:26.637Z","updated_at":"2025-04-05T16:09:50.086Z","avatar_url":"https://github.com/pansyjs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://ant.design\"\u003e\n    \u003cimg width=\"200\" src=\"https://cdn.jsdelivr.net/gh/wangxingkang/pictures@latest/imgs/amap-logo.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eReact AMap\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  基于 React 封装的高德地图组件，助你轻松的接入高德地图到 React 项目中。\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/pansyjs/react-amap/network\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/forks/pansyjs/react-amap.svg\" alt=\"Forks\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/pansyjs/react-amap/stargazers\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/pansyjs/react-amap.svg\" alt=\"Stars\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@pansy/react-amap\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@pansy/react-amap.svg\" alt=\"npm version\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n本仓库提供了常用的地图组件，如不满足您的需求：\n\n1. 请在 [issues](https://github.com/pansyjs/react-amap/issues) 提出需求。\n2. 提 PR 扩展组件。\n3. 使用提供的自定义组件的能力，自己封装。\n\n**注意**\n\n由于高德API`v1` 和 `v2`兼容性问题，本仓库提供对应的版本\n\n- `v1.x.x` 对应 `amap v1`\n- `v2.x.x` 对应 `amap v2` \n\n## ✨ 特性\n\n- 📦 开箱即用，封装了大部分常用的地图组件\n- 🎉 可扩展，支持自定义地图组件\n- 💻 使用 TypeScript 编写，提供完善的类型定义，包含高德地图 JS SDK 类型声明\n\n## 🏗 安装\n\n```sh\n# npm install\n$ npm install @pansy/react-amap --save\n\n# yarn install\n$ yarn add @pansy/react-amap\n\n# pnpm install\n$ pnpm i @pansy/react-amap\n```\n\n## 🔨 使用\n\n```html\n\u003cdiv id=\"app\"\u003e\u003c/div\u003e\n```\n\n```css\n#app {\n  width: 600px;\n  height: 400px;\n}\n```\n\n```tsx | pure\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Map } from '@pansy/react-amap';\n\nReactDOM.render(\n  \u003cMap mapKey={YOUR_AMAP_KEY} /\u003e,\n  document.querySelector('#app')\n)\n```\n\n## 🎉 组件列表\n\n### 地图\n\n|名称|说明|\n|--|--|\n|[APILoader](https://amap.xingkang.wang/components/api-loader)|JS API加载|\n|[Map](https://amap.xingkang.wang/components/map)|地图组件|\n\n### 图层\n\n|名称|说明|\n|--|--|\n|[Heatmap](https://amap.xingkang.wang/components/heatmap)|热力图|\n|[Satellite](https://amap.xingkang.wang/components/satellite)|卫星图|\n|[Traffic](https://amap.xingkang.wang/components/traffic)|实时交通图层|\n\n### 点标记\n\n|名称|说明|\n|--|--|\n|[ElasticMarker](https://amap.xingkang.wang/components/elastic-marker)|灵活点标记|\n|[Marker](https://amap.xingkang.wang/components/marker)|点标记|\n|[MarkerCluster](https://amap.xingkang.wang/components/marker-cluster)|点聚合|\n|[MassMarks](https://amap.xingkang.wang/components/mass-marks)|海量点类|\n\n### 信息窗体\n\n|名称|说明|\n|--|--|\n|[InfoWindow](https://amap.xingkang.wang/components/info-window)|信息窗体|\n\n### 右键菜单\n\n|名称|说明|\n|--|--|\n|[ContextMenu](https://amap.xingkang.wang/components/context-menu)|右键菜单|\n\n### 矢量图形\n\n|名称|说明|\n|--|--|\n|[BezierCurve](https://amap.xingkang.wang/components/bezier-curve)|贝塞尔曲线|\n|[Circle](https://amap.xingkang.wang/components/circle)|圆形|\n|[CircleMarker](https://amap.xingkang.wang/components/circle-marker)|圆点标记|\n|[Ellipse](https://amap.xingkang.wang/components/ellipse)|椭圆|\n|[Polygon](https://amap.xingkang.wang/components/polygon)|多边形|\n|[Polyline](https://amap.xingkang.wang/components/polyline)|折线|\n|[Rectangle](https://amap.xingkang.wang/components/rectangle)|矩形|\n\n### 工具\n\n|名称|说明|\n|--|--|\n|[MouseTool](https://amap.xingkang.wang/components/mouse-tool)|鼠标工具|\n|[RangingTool](https://amap.xingkang.wang/components/ranging-tool)|距离量测|\n|[BezierCurveEditor](https://amap.xingkang.wang/components/bezier-curve-editor)|贝瑟尔曲线编辑|\n|[CircleEditor](https://amap.xingkang.wang/components/circle-editor)|圆形编辑|\n|[EllipseEditor](https://amap.xingkang.wang/components/ellipse-editor)|椭圆编辑|\n|[PolyEditor](https://amap.xingkang.wang/components/poly-editor)|折线/多边形编辑|\n|[PolygonEditor](https://amap.xingkang.wang/components/polygon-editor)|多边形编辑|\n|[PolylineEditor](https://amap.xingkang.wang/components/polyline-editor)|折线编辑|\n|[RectangleEditor](https://amap.xingkang.wang/components/rectangle-editor)|矩形编辑|\n\n### 地图控件\n\n|名称|说明|\n|--|--|\n|[ControlBar](https://amap.xingkang.wang/components/control-bar)|3D控制组件|\n|[HawkEye](https://amap.xingkang.wang/components/hawk-eye)|地图鹰眼|\n|[MapType](https://amap.xingkang.wang/components/map-type)|地图类型切换|\n|[Scale](https://amap.xingkang.wang/components/scale)|比例尺|\n|[ToolBar](https://amap.xingkang.wang/components/tool-bar)|工具条|\n\n### 搜索\n\n|名称|说明|\n|--|--|\n|[AutoComplete](https://amap.xingkang.wang/components/auto-complete)|关键字搜索|\n|[DistrictSearch](https://amap.xingkang.wang/components/district-search)|行政区查询|\n\n### 地理编码\n\n|名称|说明|\n|--|--|\n|[Geocoder](https://amap.xingkang.wang/components/geocoder)|地理编码与逆地理编码服务|\n\n### AMapUI\n\n|名称|说明|\n|--|--|\n|[PathNavigator](https://amap.xingkang.wang/components/path-simplifier)|轨迹巡航控制|\n|[PointSimplifier](https://amap.xingkang.wang/components/point-simplifier)|海量点展示|\n\n### Loca\n\n|名称|说明|\n|--|--|\n|[ScatterLayer](https://amap.xingkang.wang/components/scatter-layer)|动画图层|\n|[PulseLinkLayer](https://amap.xingkang.wang/components/pulse-link-layer)|连接飞线图层|\n\n## 👥 社区互助\n\n| Github Issue | 钉钉群 | 微信群 |\n| --- | --- | --- |\n| [issues](https://github.com/pansyjs/react-amap/issues) | \u003cimg src=\"https://cdn.jsdelivr.net/gh/wangxingkang/pictures@latest/imgs/alita-dingding.png\" height=\"60\" /\u003e | \u003cimg src=\"https://cdn.jsdelivr.net/gh/wangxingkang/pictures@latest/imgs/alita-wx.png\" height=\"60\" /\u003e |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpansyjs%2Freact-amap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpansyjs%2Freact-amap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpansyjs%2Freact-amap/lists"}