{"id":28729750,"url":"https://github.com/didi/react-tmap","last_synced_at":"2025-06-15T17:10:56.456Z","repository":{"id":40434206,"uuid":"480208346","full_name":"didi/react-tmap","owner":"didi","description":"一个基于腾讯地图JavaScript API GL、TypeScript 封装适用于 react 的高性能地图组件库","archived":false,"fork":false,"pushed_at":"2023-02-13T03:39:45.000Z","size":2521,"stargazers_count":48,"open_issues_count":3,"forks_count":4,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-06-04T18:28:37.786Z","etag":null,"topics":["map","map-component","qqmap","react","tmap","typescript"],"latest_commit_sha":null,"homepage":"https://didi.github.io/react-tmap/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/didi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2022-04-11T03:05:18.000Z","updated_at":"2025-03-17T06:33:44.000Z","dependencies_parsed_at":"2024-01-29T10:10:00.710Z","dependency_job_id":"eeb465c6-e4eb-40f7-93f2-0781d315abb9","html_url":"https://github.com/didi/react-tmap","commit_stats":{"total_commits":13,"total_committers":3,"mean_commits":4.333333333333333,"dds":0.3076923076923077,"last_synced_commit":"19547731d0064ea4f63e7856a34b8829eafcbff0"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/didi/react-tmap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/didi%2Freact-tmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/didi%2Freact-tmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/didi%2Freact-tmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/didi%2Freact-tmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/didi","download_url":"https://codeload.github.com/didi/react-tmap/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/didi%2Freact-tmap/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260016055,"owners_count":22946321,"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":["map","map-component","qqmap","react","tmap","typescript"],"created_at":"2025-06-15T17:10:55.713Z","updated_at":"2025-06-15T17:10:56.448Z","avatar_url":"https://github.com/didi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-tmap\n\n![](https://img.shields.io/npm/v/@map-component/react-tmap.svg)\n![](https://img.shields.io/npm/dt/@map-component/react-tmap.svg)\n![](https://img.shields.io/npm/l/express.svg)\n\n- en [English](https://github.com/didi/react-tmap/blob/main/README.md)\n- zh_CN [简体中文](https://github.com/didi/react-tmap/blob/main/README.zh_CN.md)\n\n### Introduction\n\nreact-tmap, a high-performance map component library for react based on Tencent Maps and TypeScript encapsulation, has the following features:\n\n- Complete documentation: documentation based on official documentation and framework usage is highly readable, and component examples are complete\n- Componentization: Encapsulate the Tencent Maps imperative api as a responsive component, no need to care about the complex map api, only need to operate the data\n- Multi-framework: contains [react-tmap](https://github.com/didi/react-tmap) and [vue-tmap](https://github.com/didi/vue-tmap), and share the same set of type definitions\n- Type-safe([@map-component/tmap-types](https://github.com/didi/tmap-types)): supplemented the type declaration of Tencent Maps sdk, components are also developed using TypeScript, a better development experience\n- Custom components: provide an open map instance, you can write custom components or directly call the map's native api\n- Performance optimization: unify the map api calling method and data monitoring to prevent performance problems caused by misuse of the map api\n\n### Documentation and Examples\n\nVisit [Official document address](https://didi.github.io/react-tmap/) to see more map components\n\n\u003e [Tencent Maps Official Documentation](https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocIndex)\n\n### Main Components\n\n| react component | description                |\n| --------------- | -------------------------- |\n| Map             | Map Basic Components       |\n| MultiMarker     | Multiple Marker Points     |\n| MultiPolyline   | Polyline                   |\n| MultiPolygon    | Polygon                    |\n| MultiLabel      | Text Labeling              |\n| MultiCircle     | Circle                     |\n| DOMOverlay      | DOM overlay abstract class |\n| InfoWindow      | Information prompt window  |\n| MarkerCluster   | Point Aggregation          |\n\n### Component library warehouse architecture diagram\n\n![Warehouse Architecture Diagram](https://pt-starimg.didistatic.com/static/starimg/img/hoIR5zeNlu1650526012816.png)\n\n### Quick start\n\n#### Install\n\n```shell\nnpm install @map-component/react-tmap\n```\n\n#### Apply for Tencent map key\n\nhttps://lbs.qq.com/dev/console/key/manage\n\n#### Simple example\n\n```javascript\nimport React, { useState } from 'react';\nimport { TMap, MultiPolygon } from '@map-component/react-tmap';\n\nconst styles = {\n  polygon: {\n    color: '#3777FF', //surface fill color\n    showBorder: false, //whether to show the edge of the pulled face\n    borderColor: '#00FFFF', //border color\n  },\n};\n\nconst paths = [\n  { lat: 40.041054, lng: 116.272303 },\n  { lat: 40.039419, lng: 116.272721 },\n  { lat: 40.039764, lng: 116.274824 },\n  { lat: 40.041374, lng: 116.274491 },\n];\n\nconst geometries = [\n  {\n    id: 'p1', //The unique identifier of the polygon in the layer (required when deleting and updating data)\n    styleId: 'polygon', //binding style name\n    paths: paths, //polygon outline\n  },\n];\n\nconst center = { lat: 40.041054, lng: 116.272303 };\n\nexport default () =\u003e {\n  const [color, setColor] = useState('#00FF00');\n  const [zoom, setZoom] = useState(16);\n\n  const polygonStyles = React.useMemo(\n    () =\u003e ({\n      polygon: {\n        ...styles.polygon,\n        color,\n      },\n    }),\n    [color],\n  );\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003e\n        \u003cbutton onClick={() =\u003e setColor('#00FFFF')}\u003e\n          Modify polygon color\n        \u003c/button\u003e\n        \u003cbutton onClick={() =\u003e setZoom(zoom + 1)}\u003eModify map zoom level\u003c/button\u003e\n      \u003c/div\u003e\n\n      \u003cTMap\n        mapKey=\"TOZBZ-OU2CX-JJP4Z-7FCBV-CDDJ2-AHFQZ\" // The applied key\n        zoom={zoom}\n        center={center} // set the center point coordinates\n        control={{\n          zoom: { position: 'BOTTOM_RIGHT' },\n          scale: false,\n          rotate: false,\n        }}\n      \u003e\n        \u003cMultiPolygon\n          styles={polygonStyles}\n          geometries={geometries}\n          onClick={() =\u003e console.log('Polygon clicked')} // Click on the polygon\n        /\u003e\n      \u003c/TMap\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n\u003e mapKey is the newly applied key\n\n### Contribution Guidelines\n\n\u003e Thanks to all the technical enthusiasts who participated in the contribution, let's build an easy-to-use map component library together\n\n#### Commit bug\n\nPlease submit a bug through issue, and describe in detail how to reproduce the error and the version of dependencies. It is best to display the reproduced code through an online code editor.\n\n#### Submit code\n\nPlease submit your code via pull request and we'll take a look soon\n\n#### Start development\n\n```\ngit clone xxx\n\ncd react-tmap // cd vue-tmap\n\nnpm install\n\nnpm run dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdidi%2Freact-tmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdidi%2Freact-tmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdidi%2Freact-tmap/lists"}