{"id":16407061,"url":"https://github.com/cipchk/angular-baidu-maps","last_synced_at":"2025-03-16T16:32:08.238Z","repository":{"id":50938505,"uuid":"93366853","full_name":"cipchk/angular-baidu-maps","owner":"cipchk","description":"Baidu Maps for Angular.","archived":false,"fork":false,"pushed_at":"2021-05-27T09:47:30.000Z","size":1270,"stargazers_count":49,"open_issues_count":0,"forks_count":13,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-12T06:11:55.242Z","etag":null,"topics":["angular","angular-baidu-maps","angular10","baidu","baidu-map","baidumap","lvy"],"latest_commit_sha":null,"homepage":"https://cipchk.github.io/angular-baidu-maps","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/cipchk.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":"2017-06-05T05:04:06.000Z","updated_at":"2024-03-25T01:13:08.000Z","dependencies_parsed_at":"2022-08-25T12:10:22.352Z","dependency_job_id":null,"html_url":"https://github.com/cipchk/angular-baidu-maps","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipchk%2Fangular-baidu-maps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipchk%2Fangular-baidu-maps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipchk%2Fangular-baidu-maps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipchk%2Fangular-baidu-maps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cipchk","download_url":"https://codeload.github.com/cipchk/angular-baidu-maps/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221666154,"owners_count":16860376,"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":["angular","angular-baidu-maps","angular10","baidu","baidu-map","baidumap","lvy"],"created_at":"2024-10-11T06:11:58.750Z","updated_at":"2024-10-27T10:57:06.449Z","avatar_url":"https://github.com/cipchk.png","language":"TypeScript","readme":"# angular-baidu-maps\n\n[Baidu Maps](http://lbsyun.baidu.com/) for Angular.\n\n[![NPM version](https://img.shields.io/npm/v/angular-baidu-maps.svg)](https://www.npmjs.com/package/angular-baidu-maps)\n![Ci](https://github.com/cipchk/angular-baidu-maps/workflows/Ci/badge.svg)\n\n## Demo\n\n- [Live Demo](https://cipchk.github.io/angular-baidu-maps/)\n- [Stackblitz](https://stackblitz.com/edit/angular-baidu-maps)\n\n### 1、安装\n\n```\nnpm install angular-baidu-maps --save\n```\n\n把 `AbmModule` 模块导入到你项目中。\n\n```typescript\nimport { AbmModule } from 'angular-baidu-maps';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    AbmModule.forRoot({\n      apiKey: '' // app key为必选项\n    })\n  ],\n  declarations: [AppComponent],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n### 2、使用\n\n**地图组件**\n\n```html\n\u003cabm-map #map [options]=\"options\" (ready)=\"onReady($event)\" style=\"height: 300px;\"\u003e\u003c/abm-map\u003e\n```\n\n**街景组件**\n\n```html\n\u003cabm-panorama #map [options]=\"options\" (ready)=\"onReady($event)\" style=\"height: 500px;\"\u003e\u003c/abm-panorama\u003e\n```\n\n默认自动异步加载 js 类库，所以只需要在 NgModule 提供 api key 就可以立即使用了。 `options` 等同百度地图 `new BMap.Map(mapContainer, options)`。\n\n## 关于事件注意点（很重要，请认真阅读）\n\n我精力有限，而如果真要以Angular的角度去开发百度地图工作量非常大，所以放弃过度性封装。正因为如此，所以您在注册**事件**的时候还是要认真一点。\n\n因此，我建议，当你需要注册一个地图的 `click` 事件时：\n\n```typescript\nmap.addEventListener('click', this._click.bind(this));\n```\n\n与之相对应，一定要在 `ngOnDestroy` 对事件的销毁：\n\n```typescript\nngOnDestroy(): void {\n    this._map.removeEventListener('click', this._click.bind(this));\n}\n```\n\n当然，这里还有一些关于**覆盖物**相关里面涉及的事件，也一并做相应的销毁处理。\n\n**很抱歉，如果你在使用 angular-baidu-maps 的时候请认真阅读；但如果你希望一个简单又不得不在几个简单的页面中使用百度地图的话，那么这个插件会是很好的选择**。\n\n## AqmConfig\n\n| 名称    | 类型           | 默认值  | 描述 |\n| ------- | ------------- | ----- | ----- |\n| `apiKey` | `string` | - | APP KEY 必填项 |\n| `apiHostAndPath` | `string` | `map.qq.com/api/js` | - |\n| `apiCallback` | `string` | `angularQQMapsLoader` | API异步加载回调函数名 |\n| `apiVersion` | `string` | `3.0` | API版本号 |\n| `apiProtocol` | `http,https,file,auto` | `auto` | API 请求协议 |\n| `mapOptions` | `Object` | - | 默认地图配置项，等同于[MapOptions 对象规范](http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a0b1) |\n| `panoramaOptions` | `Object` | - | 默认全景配置项，等同于[PanoramaOptions 对象规范](http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a8b1) |\n| `libraries` | `string[]` | - | 其他类库地址，例如 `BMapLib` 就需要引入：`['//api.map.baidu.com/library/RectangleZoom/1.2/src/RectangleZoom_min.js']` |\n\n## Troubleshooting\n\nPlease follow this guidelines when reporting bugs and feature requests:\n\n1. Use [GitHub Issues](https://github.com/cipchk/angular-baidu-maps/issues) board to report bugs and feature requests (not our email address)\n2. Please **always** write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.\n\nThanks for understanding!\n\n### License\n\nThe MIT License (see the [LICENSE](https://github.com/cipchk/angular-baidu-maps/blob/master/LICENSE) file for the full text)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcipchk%2Fangular-baidu-maps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcipchk%2Fangular-baidu-maps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcipchk%2Fangular-baidu-maps/lists"}