{"id":16535449,"url":"https://github.com/qiuxiang/react-native-baidumap-sdk","last_synced_at":"2025-04-05T06:09:21.596Z","repository":{"id":48360788,"uuid":"116677014","full_name":"qiuxiang/react-native-baidumap-sdk","owner":"qiuxiang","description":"React Native BaiduMap SDK for Android + iOS","archived":false,"fork":false,"pushed_at":"2021-12-16T09:18:08.000Z","size":11031,"stargazers_count":331,"open_issues_count":112,"forks_count":71,"subscribers_count":18,"default_branch":"main","last_synced_at":"2025-01-25T09:16:07.476Z","etag":null,"topics":["baidu-map","baidumap","geolocation","location","maps","mapview","react-native"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","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/qiuxiang.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}},"created_at":"2018-01-08T12:59:49.000Z","updated_at":"2025-01-07T03:22:42.000Z","dependencies_parsed_at":"2022-08-20T05:01:35.913Z","dependency_job_id":null,"html_url":"https://github.com/qiuxiang/react-native-baidumap-sdk","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiuxiang%2Freact-native-baidumap-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiuxiang%2Freact-native-baidumap-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiuxiang%2Freact-native-baidumap-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiuxiang%2Freact-native-baidumap-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qiuxiang","download_url":"https://codeload.github.com/qiuxiang/react-native-baidumap-sdk/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294541,"owners_count":20915340,"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":["baidu-map","baidumap","geolocation","location","maps","mapview","react-native"],"created_at":"2024-10-11T18:27:31.825Z","updated_at":"2025-04-05T06:09:21.579Z","avatar_url":"https://github.com/qiuxiang.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"**注意：该项目已暂停维护**\n\n# react-native-baidumap-sdk [![npm version][version-badge]][npm] [![build status][build-badge]][build]\n\nReact Native BaiduMap SDK for Android + iOS.\n\n你可以下载安装 [example.apk](https://github.com/qiuxiang/react-native-baidumap-sdk/releases/download/v0.5.0/example.apk) 看看实际中的效果。\n\n## 安装\n\n- [安装说明](docs/installation.md)\n- [项目示例运行说明](docs/setup.md)\n\n## 用法\n\n### 基本用法\n```javascript\nimport { MapView } from 'react-native-baidumap-sdk'\n\nrender() {\n  return \u003cMapView center={{ latitude: 39.2, longitude: 112.4 }} /\u003e\n}\n```\n\n### 显示卫星图\n```javascript\n\u003cMapView satellite /\u003e\n```\n\u003cimg src=\"https://user-images.githubusercontent.com/1709072/36829451-37e03fba-1d5a-11e8-8cb4-7d4a5296a083.png\" width=300\u003e\n\n### 监听地图事件\n```javascript\nimport { MapView } from 'react-native-baidumap-sdk'\n\nrender() {\n  return (\n    \u003cMapView\n      onLoad={() =\u003e console.log('onLoad')}\n      onClick={point =\u003e console.log(point)}\n      onStatusChange={status =\u003e console.log(status)}\n    /\u003e\n  )\n}\n```\n\u003cimg src=\"https://user-images.githubusercontent.com/1709072/36655486-edc2e0f8-1afd-11e8-942b-22ae7c2db21c.png\" width=300\u003e\n\n### 定位并关联定位图层\n```javascript\nimport { MapView, Location } from 'react-native-baidumap-sdk'\n\nawait Location.init()\nLocation.addLocationListener(location =\u003e this.setState({ location }))\nLocation.start()\n\nstate = { location: null }\n\nrender() {\n  return \u003cMapView location={this.state.location} locationEnabled /\u003e\n}\n```\n\u003cimg src=\"https://user-images.githubusercontent.com/1709072/36655487-ee218a5e-1afd-11e8-8efd-e2ed99268df5.png\" width=300\u003e\n\n### 添加标记\n```javascript\n\u003cMapView\u003e\n  \u003cMapView.Marker\n    color=\"#2ecc71\"\n    title=\"This is a marker\"\n    onPress={this.onPress}\n  /\u003e\n\u003c/MapView\u003e\n```\n\u003cimg src=\"https://user-images.githubusercontent.com/1709072/36655491-f24ab3d0-1afd-11e8-8928-622a624aa850.png\" width=300\u003e\n\n### 添加自定义图片标记\n```javascript\n\u003cMapView\u003e\n  \u003cMapView.Marker\n    title=\"This is a image marker\"\n    image=\"flag\"\n    coordinate={{ latitude: 39, longitude: 113 }}\n  /\u003e\n\u003c/MapView\u003e\n```\n\u003cimg src=\"https://user-images.githubusercontent.com/1709072/36775133-c320cb5e-1c9b-11e8-9f04-9ab2d4139a5f.png\" width=300\u003e\n\n### 添加自定义 View 标记\n```javascript\n\u003cMapView\u003e\n  \u003cMapView.Marker\n    icon={() =\u003e (\n      \u003cView\u003e\n        \u003cImage source={image} /\u003e\n        \u003cText\u003eThis is a custom marker\u003c/Text\u003e\n      \u003c/View\u003e\n    )}\n  /\u003e\n\u003c/MapView\u003e\n```\n\u003cimg src=\"https://user-images.githubusercontent.com/1709072/36655482-ec5d23b8-1afd-11e8-99c3-bbf62c163476.png\" width=300\u003e\n\n### 点聚合\n```javascript\nonStatusChange = status =\u003e this.cluster.update(status)\n\nrenderMarker = item =\u003e (\n  \u003cMapView.Marker\n    key={item.extra.key}\n    coordinate={item.coordinate}\n  /\u003e\n)\n\nrender() {\n  return (\n    \u003cMapView onStatusChange={this.onStatusChange}\u003e\n      \u003cMapView.Cluster\n        ref={ref =\u003e this.cluster = ref}\n        markers={this.markers}\n        renderMarker={this.renderMarker}\n      /\u003e\n    \u003c/MapView\u003e\n  )\n}\n```\n\u003cimg src=\"https://user-images.githubusercontent.com/1709072/36655484-ed17649e-1afd-11e8-81c5-04a981862b1a.png\" width=300\u003e \u003cimg src=\"https://user-images.githubusercontent.com/1709072/36655483-ecbb4b64-1afd-11e8-954c-ded218f8a696.png\" width=300\u003e\n\n### 显示热力图\n\n```javascript\npoints = [\n  {\n    latitude: 39,\n    longitude: 113,\n    intensity: 16,\n  },\n  ...\n]\n\n\u003cMapView\u003e\n  \u003cMapView.HeatMap\n    points={this.points}\n    radius={20}\n    opacity={0.5}\n  /\u003e\n\u003c/MapView\u003e\n```\n\u003cimg src=\"https://user-images.githubusercontent.com/1709072/36829390-f57f7e7e-1d59-11e8-8654-2f264e61d32b.png\" width=300\u003e\n\n### 地理编码/逆地理编码\n```javascript\nimport { Geocode } from 'react-native-baidumap-sdk'\n\nconst searchResult = await Geocode.search('海龙大厦')\nconst reverseResult = await Geocode.reverse({ latitude: 39, longitude: 113 })\n```\n\u003cimg src=\"https://user-images.githubusercontent.com/1709072/36655485-ed756bfc-1afd-11e8-8f4b-c6ec50ebc8dd.png\" width=300\u003e\n\n需要注意，以上例子简写了一些属性，并不能直接使用，更多实际的例子请参考：[example](https://github.com/qiuxiang/react-native-baidumap-sdk/tree/master/example)。\n\n## 接口文档\n- [MapView](docs/map-view.md)\n  - [Marker](docs/marker.md)\n  - [Polyline](docs/polyline.md)\n  - [Polygon](docs/polygon.md)\n  - [Circle](docs/circle.md)\n  - [HeatMap](docs/heat-map.md)\n  - [Cluster](docs/cluster.md)\n- [Location](docs/location.md)\n- [Geocode](docs/geocode.md)\n\n[npm]: https://www.npmjs.com/package/react-native-baidumap-sdk\n[version-badge]: https://badge.fury.io/js/react-native-baidumap-sdk.svg\n[build-badge]: https://travis-ci.org/qiuxiang/react-native-baidumap-sdk.svg?branch=master\n[build]: https://travis-ci.org/qiuxiang/react-native-baidumap-sdk\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqiuxiang%2Freact-native-baidumap-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqiuxiang%2Freact-native-baidumap-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqiuxiang%2Freact-native-baidumap-sdk/lists"}