{"id":13901364,"url":"https://github.com/qiuxiang/react-native-amap3d","last_synced_at":"2025-05-15T01:09:02.446Z","repository":{"id":39351353,"uuid":"92480934","full_name":"qiuxiang/react-native-amap3d","owner":"qiuxiang","description":"react-native 高德地图组件，使用最新 3D SDK，支持 Android + iOS","archived":false,"fork":false,"pushed_at":"2023-10-28T08:46:38.000Z","size":1732,"stargazers_count":1307,"open_issues_count":286,"forks_count":336,"subscribers_count":24,"default_branch":"main","last_synced_at":"2025-04-29T04:06:51.232Z","etag":null,"topics":["amap","maps","mapview","react-native"],"latest_commit_sha":null,"homepage":"https://qiuxiang.github.io/react-native-amap3d/api/","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/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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-05-26T06:48:38.000Z","updated_at":"2025-04-24T14:48:33.000Z","dependencies_parsed_at":"2022-07-14T16:48:03.100Z","dependency_job_id":"b6fdcc7a-31c0-4a3d-bdc0-e3f1d7b2926b","html_url":"https://github.com/qiuxiang/react-native-amap3d","commit_stats":{"total_commits":507,"total_committers":14,"mean_commits":"36.214285714285715","dds":"0.035502958579881616","last_synced_commit":"f50289bfd0fbb066b46dbfb9563452696a3b2f02"},"previous_names":[],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiuxiang%2Freact-native-amap3d","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiuxiang%2Freact-native-amap3d/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiuxiang%2Freact-native-amap3d/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiuxiang%2Freact-native-amap3d/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qiuxiang","download_url":"https://codeload.github.com/qiuxiang/react-native-amap3d/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253354519,"owners_count":21895439,"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","maps","mapview","react-native"],"created_at":"2024-08-06T21:01:16.744Z","updated_at":"2025-05-15T01:08:57.438Z","avatar_url":"https://github.com/qiuxiang.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-native-amap3d [![][version-badge]][npm] [![](https://github.com/qiuxiang/react-native-amap3d/actions/workflows/build.yml/badge.svg)](https://github.com/qiuxiang/react-native-amap3d/actions/workflows/build.yml)\n\n**注意：该项目目前只维护，不加新功能。**\n\nreact-native 高德地图组件，使用最新 3D SDK，支持 Android + iOS，受 [react-native-maps](https://github.com/airbnb/react-native-maps) 启发，提供功能丰富且易用的接口。\n\n相关项目推荐：\n\n- [react-native-baidumap-sdk（百度地图 SDK）](https://github.com/qiuxiang/react-native-baidumap-sdk)\n- [react-native-amap-geolocation（高德地图定位模块）](https://github.com/qiuxiang/react-native-amap-geolocation)\n\n## 功能\n\n- 地图模式切换（常规、卫星、导航、夜间）\n- 3D 建筑、路况、室内地图\n- 内置地图控件的显示隐藏（指南针、比例尺、定位按钮、缩放按钮）\n- 手势交互控制（平移、缩放、旋转、倾斜）\n- 中心坐标、缩放级别、倾斜度的设置，支持动画过渡\n- 地图事件（onPress、onLongPress、onLocation、onCameraMove、onCameraIdle 等）\n- 地图标记（Marker）\n- 折线绘制（Polyline）\n- 多边形绘制（Polygon）\n- 圆形绘制（Circle）\n- 热力图（HeatMap）\n- 海量点（MultiPoint）\n- 点聚合（Cluster）\n\n## 接口文档\n\nhttps://qiuxiang.github.io/react-native-amap3d/api/\n\n## 安装\n\n```bash\nnpm i react-native-amap3d\n```\n\n### 添加高德 API Key\n\n首先你需要获取高德地图 API Key：\n\n- [Aandroid](http://lbs.amap.com/api/android-sdk/guide/create-project/get-key)\n- [iOS](https://lbs.amap.com/api/ios-sdk/guide/create-project/get-key)\n\n然后你需要在显示地图前调用接口设置 API key：\n\n```js\nimport { AMapSdk } from \"react-native-amap3d\";\nimport { Platform } from \"react-native\";\n\nAMapSdk.init(\n  Platform.select({\n    android: \"c52c7169e6df23490e3114330098aaac\",\n    ios: \"186d3464209b74effa4d8391f441f14d\",\n  })\n);\n```\n\n## 用法\n\n### 显示地图\n\n```jsx\nimport { MapView, MapType } from \"react-native-amap3d\";\n\n\u003cMapView\n  mapType={MapType.Satellite}\n  initialCameraPosition={{\n    target: {\n      latitude: 39.91095,\n      longitude: 116.37296,\n    },\n    zoom: 8,\n  }}\n/\u003e;\n```\n\n\u003cimg src=https://user-images.githubusercontent.com/1709072/140698774-bdbfee64-d403-4e49-9a85-716d44783cfd.png height=500\u003e \u003cimg src=https://user-images.githubusercontent.com/1709072/140849895-dada3f51-74c0-4685-b5d6-c1b69a4d06bb.PNG height=500\u003e\n\n### 监听地图事件\n\n```jsx\nimport { MapView } from \"react-native-amap3d\";\n\n\u003cMapView\n  onLoad={() =\u003e console.log(\"onLoad\")}\n  onPress={({ nativeEvent }) =\u003e console.log(nativeEvent)}\n  onCameraIdle={({ nativeEvent }) =\u003e console.log(nativeEvent)}\n/\u003e;\n```\n\n\u003cimg src=https://user-images.githubusercontent.com/1709072/140705501-9ed3e038-e52a-48c2-a98a-235c5c890549.png height=500\u003e \u003cimg src=https://user-images.githubusercontent.com/1709072/140849894-3add3858-fc7f-47cd-9786-94aeef399ebc.PNG height=500\u003e\n\n### 添加标记\n\n其中 `icon` 支持 [ImageSource](https://reactnative.dev/docs/image#imagesource)。\n\n同时支持 `children` 作为标记图标。\n\n```jsx\nimport { MapView, Marker } from \"react-native-amap3d\";\n\n\u003cMapView\u003e\n  \u003cMarker\n    position={{ latitude: 39.806901, longitude: 116.397972 }}\n    icon={require(\"../images/flag.png\")}\n    onPress={() =\u003e alert(\"onPress\")}\n  /\u003e\n  \u003cMarker\n    position={{ latitude: 39.806901, longitude: 116.297972 }}\n    icon={{\n      uri: \"https://reactnative.dev/img/pwa/manifest-icon-512.png\",\n      width: 64,\n      height: 64,\n    }}\n  /\u003e\n  \u003cMarker position={{ latitude: 39.906901, longitude: 116.397972 }}\u003e\n    \u003cText\n      style={{\n        color: \"#fff\",\n        backgroundColor: \"#009688\",\n        alignItems: \"center\",\n        borderRadius: 5,\n        padding: 5,\n      }}\n    \u003e\n      {new Date().toLocaleString()}\n    \u003c/Text\u003e\n  \u003c/Marker\u003e\n\u003c/MapView\u003e;\n```\n\n\u003cimg src=https://user-images.githubusercontent.com/1709072/140707579-4abe070a-3fc1-481d-8a2e-91ac2ad8bdc7.png height=500\u003e \u003cimg src=https://user-images.githubusercontent.com/1709072/140849886-7eb9322b-8fa8-4049-a7b0-3eb36d006992.PNG height=500\u003e\n\n### 点聚合\n\nMarker 数量过多（尤其是使用自定义 View 的情况下）会导致性能问题，而且显示过于密集，这时候可以用点聚合改善。\n\n```jsx\nimport { Cluster, MapView, Marker } from \"react-native-amap3d\";\n\nconst markers = Array(1000)\n  .fill(0)\n  .map((_, i) =\u003e ({\n    position: { latitude: 39.5 + Math.random(), longitude: 116 + Math.random() },\n    properties: { key: `Marker${i}` },\n  }));\n\n\u003cMapView\n  ref={(ref) =\u003e (this.mapView = ref)}\n  onLoad={() =\u003e this.mapView?.moveCamera({ zoom: 8 }, 100)}\n  onCameraIdle={({ nativeEvent }) =\u003e {\n    this.status = nativeEvent;\n    this.cluster?.update(nativeEvent);\n  }}\n\u003e\n  \u003cCluster\n    ref={(ref) =\u003e (this.cluster = ref)}\n    points={markers}\n    renderMarker={(item) =\u003e (\n      \u003cMarker\n        key={item.properties.key}\n        icon={require(\"../images/flag.png\")}\n        position={item.position}\n      /\u003e\n    )}\n  /\u003e\n\u003c/MapView\u003e;\n```\n\n\u003cimg src=https://user-images.githubusercontent.com/1709072/140710764-40f767cd-74fd-47ca-8310-897bbf58fbbd.png height=500\u003e \u003cimg src=https://user-images.githubusercontent.com/1709072/140849888-6b6609c1-2e55-41c2-bdc3-f9d3fcc7a112.PNG height=500\u003e\n\n\u003cimg src=https://user-images.githubusercontent.com/1709072/140710758-63e81ade-2635-4412-a5fa-b6948605fe75.png height=500\u003e \u003cimg src=https://user-images.githubusercontent.com/1709072/140849880-9eb7609d-55a7-43be-8b6a-bac725fb0a82.PNG height=500\u003e\n\n### 更多示例\n\n参考 [example](https://github.com/qiuxiang/react-native-amap3d/tree/master/example-app)。\n\n## 常见问题\n\n- 尽量使用真实设备进行测试，在模拟器可能存在一些问题（常见的是 Android 模拟器因为缺少 GPU 加速而导致闪退）。\n- onLocation 没有返回定位数据通常是因为 key 不正确，或没有申请 PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION 权限\n\n[npm]: https://www.npmjs.com/package/react-native-amap3d\n[version-badge]: https://img.shields.io/npm/v/react-native-amap3d.svg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqiuxiang%2Freact-native-amap3d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqiuxiang%2Freact-native-amap3d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqiuxiang%2Freact-native-amap3d/lists"}