{"id":19675923,"url":"https://github.com/yezihaohao/react-qmap","last_synced_at":"2025-10-06T17:16:52.056Z","repository":{"id":30366373,"uuid":"124550869","full_name":"yezihaohao/react-qmap","owner":"yezihaohao","description":":bulb:react腾讯地图开源组件","archived":false,"fork":false,"pushed_at":"2022-12-07T17:21:42.000Z","size":1952,"stargazers_count":78,"open_issues_count":33,"forks_count":23,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-03T21:47:04.311Z","etag":null,"topics":["component","gis","map","react"],"latest_commit_sha":null,"homepage":"https://react-qmap.yezihaohao.vercel.app/","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/yezihaohao.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-03-09T14:28:41.000Z","updated_at":"2024-07-25T01:24:03.000Z","dependencies_parsed_at":"2023-01-14T17:00:34.049Z","dependency_job_id":null,"html_url":"https://github.com/yezihaohao/react-qmap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yezihaohao/react-qmap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yezihaohao%2Freact-qmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yezihaohao%2Freact-qmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yezihaohao%2Freact-qmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yezihaohao%2Freact-qmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yezihaohao","download_url":"https://codeload.github.com/yezihaohao/react-qmap/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yezihaohao%2Freact-qmap/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278646829,"owners_count":26021523,"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","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","gis","map","react"],"created_at":"2024-11-11T17:26:23.304Z","updated_at":"2025-10-06T17:16:52.029Z","avatar_url":"https://github.com/yezihaohao.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-qmap -- React腾讯地图组件\n\n#### 一个对腾讯web地图简单封装的React组件\n **GitHub源码地址：[戳我](https://github.com/yezihaohao/react-qmap)**\n\n **栗子：[戳我](https://react-qmap-8meha15de.vercel.app/)**\n\n **栗子源码：[戳我](https://github.com/yezihaohao/react-qmap/tree/master/examples/src/components/maps)**\n\n![demo截图](https://raw.githubusercontent.com/yezihaohao/react-qmap/master/examples/src/styles/t.gif)\n\n **安装**\n```\nyarn add react-qmap\nor npm install react-qmap\n```\n\n **基础用法**\n\n```\nimport ReactQMap from 'react-qmap';\n\n\u003cReactQMap\n    center={{latitude: 30.53786, longitude: 104.07265}}\n    initialOptions={{zoomControl: true, mapTypeControl: true}}\n    apiKey=\"xxxxxx-xxxxx-xxxxx-xxxxxx\"\n    style={{height: 300}}    // 高度和宽度默认占父元素的100%\n/\u003e\n```\n\n#### API\nMethod            | Type     | Optional | Default | Description\n----------------- | -------- | -------- | --------| -----------\ngetMap   | function | false |  |  获取地图的对象和当前容器的map对象,第一个参数是new的当前map对象，第二个参数是全局map对象\nstyle   | object| false |  |  设置组件的内联样式，默认样式width: '100%', height: '100%'\nclassName   | string| false |  |  设置组件的class\nmySpot   | object| false |  |  设置地图的定位坐标\ninitialOptions   | object| false | zoom: 14,disableDefaultUI: true, zoomControl: false,mapTypeControl: false, |  初始化地图的参数，简单默认设置了几个，更多的初始化参数请参照[文档](http://lbs.qq.com/javascript_v2/doc/mapoptions.html)\napiKey   | string| true |  |  设置地图引用的key,为防止限制调用API,建议[官网](http://lbs.qq.com/index.html)申请自己的key\ncenter   | object| true |  |  设置地图初始化的中心位置坐标\ngetContainer   | function| false |  |  获取地图的html dom元素的函数，参数是当前地图挂载的元素DOM\nlibraries   | array| false |  |  设置地图的libraries库，支持数组传多个库，[示例](https://react-qmap.yezihaohao.vercel.app/#/drawing)，其他具体库的用法请参考官网\n\n#### 其他框架和库的支持\n\n##### [taro](https://github.com/NervJS/taro)\n编译之后有问题，所以暂时采取复制文件到项目中的方式：\n\n文件：[https://github.com/yezihaohao/react-qmap/blob/master/examples/src/components/maps/TaroQMap.js](https://github.com/yezihaohao/react-qmap/blob/master/examples/src/components/maps/TaroQMap.js)\n```js\n// 复制文件到相应的目录，例如当前文件目录\n// taro对应的文件代码中使用\nimport TaroQMap from './TaroQMap';\n\n{process.env.TARO_ENV === 'h5' \u0026\u0026 (\n    \u003cView style={{ height: 500, width: 500 }}\u003e\n        \u003cTaroQMap\n            center={{latitude: 30.53786, longitude: 104.07265}}\n            mySpot={{latitude: 30.53786, longitude: 104.07265}}\n            apiKey=\"xxxxx\"\n        /\u003e\n    \u003c/View\u003e\n)}\n```\n\n\n#### 关于\n有了初始化的地图，获取到地图对象之后，就可以按照官网提供的资料随心所欲了。\n\n更多关于API的操作请查看腾讯地图官网（[戳我](http://lbs.qq.com/javascript_v2/doc/index.html#g0)）\n\n封装还在继续，如果老铁有更好的方式或想法不妨PR走起一波~会给你双击666\n\n如果有问题可加入前端交流群一起讨论：前端攻城狮②群：592688854\n\n#### license\nMIT\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyezihaohao%2Freact-qmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyezihaohao%2Freact-qmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyezihaohao%2Freact-qmap/lists"}