{"id":13508943,"url":"https://github.com/ElemeFE/react-amap","last_synced_at":"2025-03-30T11:33:05.512Z","repository":{"id":18649489,"uuid":"84837555","full_name":"ElemeFE/react-amap","owner":"ElemeFE","description":"基于 React 封装的高德地图组件。AMap Component Based On React.","archived":false,"fork":false,"pushed_at":"2023-10-26T08:38:28.000Z","size":5849,"stargazers_count":1041,"open_issues_count":86,"forks_count":151,"subscribers_count":21,"default_branch":"next","last_synced_at":"2025-03-23T23:17:46.500Z","etag":null,"topics":["amap","javascript","map","react"],"latest_commit_sha":null,"homepage":"https://elemefe.github.io/react-amap/articles/start","language":"JavaScript","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/ElemeFE.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING_en-us.md","funding":null,"license":"COPYING","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-03-13T14:42:12.000Z","updated_at":"2025-02-23T05:23:51.000Z","dependencies_parsed_at":"2024-01-13T20:38:01.238Z","dependency_job_id":"99f641e8-52b4-4a1f-817a-58d8a0f63ff2","html_url":"https://github.com/ElemeFE/react-amap","commit_stats":{"total_commits":234,"total_committers":12,"mean_commits":19.5,"dds":0.08119658119658124,"last_synced_commit":"1b3fa09d05c55a7ba551a33b1b4f91e93c5d61c0"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Freact-amap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Freact-amap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Freact-amap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Freact-amap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ElemeFE","download_url":"https://codeload.github.com/ElemeFE/react-amap/tar.gz/refs/heads/next","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246314044,"owners_count":20757455,"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","javascript","map","react"],"created_at":"2024-08-01T02:01:00.752Z","updated_at":"2025-03-30T11:33:04.873Z","avatar_url":"https://github.com/ElemeFE.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cimg src=\"https://cloud.githubusercontent.com/assets/3898898/23833571/e5c7ae68-0782-11e7-8590-cecf4f3c969f.png\" width=\"118\" height=\"118\" /\u003e\n\n# react-amap\n\n[![Build Status](https://travis-ci.org/ElemeFE/react-amap.svg?branch=master)](https://travis-ci.org/ElemeFE/react-amap)\n[![npm version](https://badge.fury.io/js/react-amap.svg?_t=20170411)](https://www.npmjs.com/package/react-amap)\n[![npm downloads](https://img.shields.io/npm/dm/react-amap.svg)](https://www.npmjs.com/package/react-amap)\n\n\u003e react-amap 是一个基于 React 封装的高德地图组件；帮助你轻松的接入地图到 React 项目中。除了必须引用的 Map 组件外，我们目前提供了最常用的 10 个地图组件，能满足大部分简单的业务场景；如果你有更复杂的需求，或者觉得默认提供的组件功能不够，你完全可以自定义一个地图组件，然后根据高德原生 API 做高德允许你做的一切事情。\n\n### 最近更新\n\nreact-amap 升级到 1.1.1，支持加载 [AMapUI 组件库](http://lbs.amap.com/api/javascript-api/guide/amap-ui/intro)。加载方式参考 [Map 组件](/components/map) 关于 **加载 AMapUI 组件库** 的说明。（2017-11-13）\n\n\n### 扩展组件\n\n从版本 [1.0.0](https://www.npmjs.com/package/react-amap) 开始，react-amap 拥有了组件的扩展能力。如果 react-amap 中已有的组件不能满足你的业务需求，你可以使用自己写的地图组件；\n\n在你的组件中，可以通过 props 访问到创建好的高德地图实例，以及地图的 div 容器；拥有访问这两个属性的能力后，你可以根据高德原生 API 做高德允许你做的一切事情。实际上，react-amap 中的其他组件就是这么做的。文档内容请参考[自定义地图组件](https://elemefe.github.io/react-amap/articles/extend)。\n\n目前已有的一些组件：\n\n1. [react-amap-plugin-heatmap](https://www.npmjs.com/package/react-amap-plugin-heatmap)，热力图组件。\n2. [react-amap-plugin-geolocation](https://www.npmjs.com/package/react-amap-plugin-geolocation)，定位组件。\n3. [react-amapui-wrapper](https://github.com/Croash/react-amapui-wrapper)，可自定义的AMapUI组件。\n\n如果你有写好的组件愿意开源出来的，欢迎提一个 PR 扩展这个列表。\n\n### 在线实时演示\n\nhttps://jsfiddle.net/ioslh/h4u8mdng/25/\n\n---\n\n如何在项目中接入 react-amap;\n\n### 安装\n```sh\nnpm install --save react-amap\n```\n\n### npm 用法\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```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Map } from 'react-amap';\n\nReactDOM.render(\n  \u003cMap amapkey={YOUR_AMAP_KEY} version={VERSION} /\u003e,\n  document.querySelector('#app')\n)\n```\n\namapkey 说明见下文\nversion 指定高德地图版本 不填则使用默认值: 1.4.0\n\n也可以手工引入你需要的组件：\n\n ```jsx   \nimport Map from 'react-amap/lib/map';\nimport Marker from 'react-amap/lib/marker';\n// ... your other code\n ```\n\n以上为简单场景的应用。\n**tips:** Map 组件的父元素须设置高度和宽度；关于代码中的 `Map` 组件的 `amapkey` 属性见下方的说明。\n\n\n### CDN 用法\n\n在 HTML 页面中加入 react-amap 库的 CDN 地址，插件会在 `window` 下暴露 `ReactAMAP` 变量。\n\n```html\n\u003cscript src=\"path/to/react.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/react-dom.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/dist/react-amap.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  var Map = ReactAMAP.Map;\n  var Marker = ReactAMAP.Marker;\n  \n  var pos = { longitude: 120, latitude: 30 };\n  var YourApp = React.createElement(\n    Map,\n    { center: pos },\n    React.createElement(\n      Marker,\n      { position: pos },\n      null\n    )\n  );\n  ReactDOM.render(YourApp, document.getElementById('root'));\n\u003c/script\u003e\n```\n\n##### CDN 地址\n\n实际应用中你可以使用下面的 CDN 地址，也可以把脚本下载下来本地部署。\n\ntips: 记得将其中的 `VERSION` 替换为真实版本号，查看历史版本[更新日志](https://elemefe.github.io/react-amap/articles/changelog)。\n\n+ https://unpkg.com/react-amap@VERSION/dist/react-amap.js\n+ https://unpkg.com/react-amap@VERSION/dist/react-amap.min.js\n\n### 关于 Key\n\n在上面的例子中需要给 Map 组件传入 `amapkey` 属性，这个是高德地图给开发者分配的开发者 Key；你可以在[高德开放平台](http://lbs.amap.com/faq/account/key/67)申请你自己的 Key。\n\n在 react-amap 中 Key 的传入方式有两种:\n\n+ 给 Map 组件传入 `amapkey` 属性（因为 React 框架本身对 `key` 属性有其他作用，所以不能用 `key`，所以我们用 `amapkey`），这样的缺点是如果多个地方使用就要每次都要传入；\n+ 你也可以定义一个纯组件,把 Map 组件的 amapkey 属性写好后返回新组件。\n+ 直接把你的 Key 定义在全局变量 `window.amapkey` 上，react-amap 在调用高德接口时会尝试从这里读取。（不推荐）\n\n组件的使用请移步[组件文档](https://elemefe.github.io/react-amap/components/about)。\n\n### 贡献指南\n\n首先感谢你使用 react-amap，react-amap 是一个基于 React 封装的高德地图组件库。\n\nreact-amap 的成长离不开大家的支持，如果你愿意为 react-amap 贡献代码或提供建议，请阅读以下内容。\n\n#### 开发\n\n```shell\nnpm install\nnpm start # http://localhost:9001\n```\n\n#### Issue 规范\n\n- issue 仅用于提交 Bug 或 Feature，其它内容可能会被直接关闭。\n- 在提交 issue 之前，请搜索相关内容是否已被提出。\n- 在提交issue时，请说明 react-amap 的版本号，并提供操作系统和浏览器信息。推荐使用 [JSFiddle](https://jsfiddle.net/ioslh/mxc0h16p/5/) 生成在线 demo，这能够更直观地重现问题。\n\n#### Pull Request 规范\n\n- 请先 fork 一份到自己的项目下，不要直接在仓库下建分支。\n\n- **不要提交 `dist` 里面打包的文件**。\n\n- 提交 PR 前请 rebase，确保 commit 记录的整洁。\n\n- 如果是修复 bug，请在 PR 中给出描述信息。\n\n- 合并代码需要两名维护人员参与：一人进行 review 后 approve，另一人再次 review，通过后即可合并。\n\n### 代码规范\n\n遵循饿了么前端的 [ESLint](https://github.com/ElemeFE/eslint-config-elemefe) 即可。\n\n### License\n\n[MIT License](https://github.com/ElemeFE/react-amap/blob/master/COPYING)\n\nCopyright (c) 2017 ElemeFE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FElemeFE%2Freact-amap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FElemeFE%2Freact-amap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FElemeFE%2Freact-amap/lists"}