{"id":13835278,"url":"https://github.com/huiyan-fe/react-bmap","last_synced_at":"2025-05-16T08:04:18.523Z","repository":{"id":44078942,"uuid":"94515383","full_name":"huiyan-fe/react-bmap","owner":"huiyan-fe","description":"基于百度地图JavaScript API封装的React组件库","archived":false,"fork":false,"pushed_at":"2024-01-02T09:34:58.000Z","size":4695,"stargazers_count":497,"open_issues_count":46,"forks_count":98,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-04-19T16:23:21.575Z","etag":null,"topics":["bmap","javascript","map","react"],"latest_commit_sha":null,"homepage":"http://huiyan-fe.github.io/react-bmap","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/huiyan-fe.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}},"created_at":"2017-06-16T07:02:57.000Z","updated_at":"2025-01-15T10:59:47.000Z","dependencies_parsed_at":"2023-01-25T15:31:28.268Z","dependency_job_id":"6d5194a7-e76d-4808-a705-0d4529beda71","html_url":"https://github.com/huiyan-fe/react-bmap","commit_stats":{"total_commits":180,"total_committers":14,"mean_commits":"12.857142857142858","dds":0.6888888888888889,"last_synced_commit":"78e2ced889ad5785ef138ee80cb0cc54c2742166"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huiyan-fe%2Freact-bmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huiyan-fe%2Freact-bmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huiyan-fe%2Freact-bmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huiyan-fe%2Freact-bmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huiyan-fe","download_url":"https://codeload.github.com/huiyan-fe/react-bmap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254493379,"owners_count":22080126,"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":["bmap","javascript","map","react"],"created_at":"2024-08-04T14:00:58.951Z","updated_at":"2025-05-16T08:04:13.511Z","avatar_url":"https://github.com/huiyan-fe.png","language":"JavaScript","readme":"# [React-BMap](https://huiyan-fe.github.io/react-bmap/) \n[![npm version](https://img.shields.io/npm/v/react-bmap.svg)](https://www.npmjs.com/package/react-bmap)\n[![Package Quality](http://npm.packagequality.com/shield/react-bmap.svg)](http://packagequality.com/#?package=react-bmap)\n\n基于百度地图JavaScript Api封装的React组件库，使用这个库最好需要先了解[React](https://facebook.github.io/react/)和[百度地图JavaScript Api](http://lbsyun.baidu.com/index.php?title=jspopular)。\n\nReact-BMap只是利用了React组件的生命周期，来调用对应的百度地图JavaScript Api的方法，比如在componentDidMount和componentDidUpdate的时候在地图上添加覆盖物，componentWillUnmount的时候移除覆盖物，React对应的render渲染函数模块返回的是null。所以这里面地图相关的dom并不是react渲染的，真正创建地图之类的还是使用百度地图JavaScript Api，React-BMap只是利用了React组件的写法来封装百度地图JavaScript Api，使我们在使用React的时候能更方便的使用百度地图JavaScript Api。\n\n## 3D地图版本\n该组件库是针对2D版本地图的React组件库，如果想使用新版本的3D地图，请使用[React-BMapGL](https://github.com/huiyan-fe/react-bmapgl)。新的GL版地图支持无级缩放、地图倾斜、旋转等强大的功能，并且能更好的发挥[MapVGL](https://mapv.baidu.com/gl/docs/index.html)炫酷的可视化效果。  \n**PS：由于3D地图基于WebGL开发，部分功能与2D版体验可能有差别，如果您的设备不支持WebGL，或者更追求稳定性，依然可以选择本组件库。**\n\n## 示例\n可查看示例文件夹下的示例使用[示例代码](https://github.com/huiyan-fe/react-bmap/tree/master/docs/examples)，示例效果可访问[预览地址](https://huiyan-fe.github.io/react-bmap/examples/)\n\n## 安装使用\n\n### 页面头部需加载百度地图JavaScript Api代码\n\n    \u003cscript type=\"text/javascript\" src=\"http://api.map.baidu.com/api?v=3.0\u0026ak=您的密钥\"\u003e\u003c/script\u003e\n\n密钥可去[百度地图开放平台官网](http://lbsyun.baidu.com/apiconsole/key)申请\n\n### 推荐使用npm方式安装使用，然后通过es6模块加载\n\n    npm install react-bmap\n\n### 支持UMD规范的打包库\n\n    \u003cscript src=\"http://huiyan-fe.github.io/react-bmap/dist/react-bmap.min.js\"\u003e\u003c/script\u003e\n\n入口命名空间window.ReactBMap [示例预览](http://huiyan-fe.github.io/react-bmap/examples/umd.html) [示例源码](https://github.com/huiyan-fe/react-bmap/blob/master/docs/examples/umd.html)\n\n## Hello World\n\n    import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmap'\n\n    \u003cMap center={{lng: 116.402544, lat: 39.928216}} zoom=\"11\"\u003e\n        \u003cMarker position={{lng: 116.402544, lat: 39.928216}} /\u003e\n        \u003cNavigationControl /\u003e \n        \u003cInfoWindow position={{lng: 116.402544, lat: 39.928216}} text=\"内容\" title=\"标题\"/\u003e\n    \u003c/Map\u003e\n    \n## 基础地图组件文档\n### [Map](./src/components/map.md)\n\n    \u003cMap center={{lng: 116.402544, lat: 39.928216}} zoom=\"12\" /\u003e\n\n### [Marker](./src/components/marker.md)\n\n    \u003cMarker position={{lng: 116.402544, lat: 39.928216}}/\u003e\n\n\u003cimg src=\"./docs/assets/screenshot/marker.png\" width=\"428\"/\u003e\n\n\u003cimg src=\"./docs/assets/screenshot/markers.png\" width=\"651\"/\u003e\n\n### [Control](./src/components/control.md)\n\n    \u003cNavigationControl /\u003e\n    \u003cMapTypeControl /\u003e\n    \u003cScaleControl /\u003e\n    \u003cOverviewMapControl /\u003e\n\n### [InfoWindow](./src/components/infowindow.md)\n\n    \u003cInfoWindow position={{lng: 116.402544, lat: 39.928216}} text=\"信息窗口内容\" title=\"信息窗口标题\"/\u003e\n\n## 图形组件，圆形、折线、多边形组件\n\n\u003cimg src=\"./docs/assets/screenshot/graphy.png\" width=\"584\"/\u003e\n\n### Circle\n\n    \u003cCircle \n        center={{lng: 116.403119, lat: 39.929543}} \n        fillColor='blue' \n        strokeColor='white' \n        radius=\"3000\"\n    /\u003e\n\n### Polyline\n\n    \u003cPolyline \n        strokeColor='green' \n        path={[\n            {lng: 116.403119, lat: 39.929543},\n            {lng: 116.265139, lat: 39.978658},\n            {lng: 116.217996, lat: 39.904309}\n        ]}\n    /\u003e\n\n### Polygon\n\n    \u003cPolygon \n        fillColor='red' \n        strokeColor='yellow' \n        path={[\n            {lng: 116.442519, lat: 39.945597},\n            {lng: 116.484488, lat: 39.905315},\n            {lng: 116.443094, lat: 39.886494},\n            {lng: 116.426709, lat: 39.900001}\n        ]}\n    /\u003e\n\n## 其它一些场景组件\n\n### MarkerList\n\n\u003cimg src=\"./docs/assets/screenshot/markerlist.png\" width=\"482\"/\u003e\n\n    \u003cMarkerList \n        data={[\n            {\n                text: \"长沙大道\",\n                location: \"113.22183,28.191712\"\n            },\n            {\n                text: \"机场高速\",\n                location: \"113.057565,28.175208\"\n            }\n        ]} \n        fillStyle=\"#ff3333\" \n        animation={true} \n        isShowShadow={false} \n        multiple={true} \n        autoViewport={true}\n    /\u003e\n\n### MapvLayer\n\n    \u003cMapvLayer data={[]} options={{}} /\u003e\n\n### MapvglLayer\n\n    \u003cMapvglView effects={['bloom']}\u003e\n        \u003cMapvglLayer\n            type=\"LineLayer\"\n            data={data}\n            options={{\n                blend: 'lighter',\n                width: 10,\n                color: 'rgb(255, 153, 0, 0.6)'\n            }}\n        /\u003e\n    \u003c/MapvglView\u003e\n\n### Road\n\n    \u003cRoad roadPath={['116.330484,40.031406,116.33124,40.029496,116.33124,40.029496']}/\u003e\n\n### Boundary \n\n    \u003cBoundary data={[\n        {\n            name: '海淀区',\n            count: 20\n        },\n        {\n            name: '朝阳区',\n            count: 10\n        }\n    ]}/\u003e\n\n### TrafficLayer 交通路况图层 \u003ca href=\"https://github.com/huiyan-fe/react-bmap/blob/master/docs/examples/components/traffic-layer.js\"\u003e示例代码\u003c/a\u003e\n    \u003cTrafficLayer /\u003e\n    \n## 获取 `BMap.Map` 实例\n如果你使用 `BMapLib`，需要 `BMap.Map` 实例的话，可以通过 `\u003cMap\u003e` 组件实例的 `map` 属性访问到它。\n\n    \u003cMap ref={ref =\u003e {this.map = ref.map}} /\u003e\n\n## 许可证\n[MIT](./LICENSE)\n","funding_links":[],"categories":["目录"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuiyan-fe%2Freact-bmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuiyan-fe%2Freact-bmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuiyan-fe%2Freact-bmap/lists"}