{"id":28729770,"url":"https://github.com/didi/vue-tmap","last_synced_at":"2025-06-15T17:11:00.925Z","repository":{"id":57680420,"uuid":"481543262","full_name":"didi/vue-tmap","owner":"didi","description":"一个基于腾讯地图JavaScript API GL、TypeScript 封装适用于 Vue3 的高性能地图组件库","archived":false,"fork":false,"pushed_at":"2023-05-16T11:50:24.000Z","size":5117,"stargazers_count":95,"open_issues_count":11,"forks_count":17,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-06-03T01:31:55.161Z","etag":null,"topics":["component","map","map-component","qqmap","tmap","typescript","vue"],"latest_commit_sha":null,"homepage":"https://didi.github.io/vue-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":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":"2022-04-14T09:24:48.000Z","updated_at":"2025-04-14T17:28:00.000Z","dependencies_parsed_at":"2024-01-29T10:10:00.001Z","dependency_job_id":"9f98934e-2e39-4efa-9d10-fc38ced29cf9","html_url":"https://github.com/didi/vue-tmap","commit_stats":{"total_commits":22,"total_committers":3,"mean_commits":7.333333333333333,"dds":"0.36363636363636365","last_synced_commit":"e913e53b5d97c6fd4acdcb4357e5d9504029fe46"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/didi/vue-tmap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/didi%2Fvue-tmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/didi%2Fvue-tmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/didi%2Fvue-tmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/didi%2Fvue-tmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/didi","download_url":"https://codeload.github.com/didi/vue-tmap/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/didi%2Fvue-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":["component","map","map-component","qqmap","tmap","typescript","vue"],"created_at":"2025-06-15T17:11:00.176Z","updated_at":"2025-06-15T17:11:00.916Z","avatar_url":"https://github.com/didi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-tmap\n\n![](https://img.shields.io/npm/v/@map-component/vue-tmap.svg)\n![](https://img.shields.io/npm/dt/@map-component/vue-tmap.svg)\n![](https://img.shields.io/npm/l/express.svg)\n\n- zh_CN [简体中文](https://github.com/didi/vue-tmap/blob/main/README.zh_CN.md)\n\n### Introduction\n\nvue-tmap, a high-performance map component library for Vue3 based on Tencent Maps and TypeScript encapsulation, has the following features:\n\n- Improve documentation: improve the readability of documentation based on official documentation and framework usage, and improve component examples\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: including [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: 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\nWelcome to [Official document address](https://didi.github.io/vue-tmap/) to view more map components.\n\n- [Tencent Maps Official Documentation](https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocIndex)\n\n### Main Components\n\n| tmap-class    | vue component       | Introduction               |\n| ------------- | ------------------- | -------------------------- |\n| Map           | tmap-map            | Map base components        |\n| MultiMarker   | tmap-multi-marker   | Multiple Marker Points     |\n| MultiPolyline | tmap-multi-polyline | Polyline                   |\n| MultiPolygon  | tmap-multi-polygon  | Polygon                    |\n| MultiLabel    | tmap-multi-label    | Text Labeling              |\n| MultiCircle   | tmap-multi-circle   | Circle                     |\n| DOMOverlay    | tmap-dom-overlay    | DOM overlay abstract class |\n| InfoWindow    | tmap-info-window    | Information prompt window  |\n| MarkerCluster | tmap-marker-cluster | Point Aggregation          |\n\n### Quick start\n\n#### Install\n\n```shell\nnpm install @map-component/vue-tmap\n```\n\n#### Apply for Tencent map key\n\nhttps://lbs.qq.com/dev/console/key/manage\n\n#### Simple example\n\n```vue\n\u003ctemplate\u003e\n  \u003ctmap-map\n    mapKey=\"CGABZ-3MH66-6VGST-MEMS3-K6U3V-DGBKA\"\n    :events=\"events\"\n    :center=\"center\"\n    :zoom=\"zoom\"\n    :doubleClickZoom=\"doubleClickZoom\"\n    :control=\"control\"\n  \u003e\n  \u003c/tmap-map\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport { defineComponent, ref } from 'vue';\n\nexport default defineComponent({\n  name: 'Home',\n  setup() {\n    const center = ref({ lat: 30.290756, lng: 120.074387 });\n    const zoom = ref(10);\n    const doubleClickZoom = ref(true);\n    const print = (e: unknown) =\u003e {\n      console.log(e);\n    };\n    return {\n      events: {\n        dblclick: print,\n      },\n      center,\n      zoom,\n      doubleClickZoom,\n      control: {\n        scale: {},\n        zoom: {\n          position: 'bottomRight',\n        },\n      },\n    };\n  },\n});\n\u003c/script\u003e\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\n### communicate with\n\nAdd WeChat group after open source\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdidi%2Fvue-tmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdidi%2Fvue-tmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdidi%2Fvue-tmap/lists"}