{"id":13497465,"url":"https://github.com/xieziyu/ngx-amap","last_synced_at":"2025-09-08T08:37:30.467Z","repository":{"id":24233322,"uuid":"100932857","full_name":"xieziyu/ngx-amap","owner":"xieziyu","description":"angular 2+ component for AMap (Gaode map)","archived":false,"fork":false,"pushed_at":"2022-09-08T17:29:15.000Z","size":8293,"stargazers_count":147,"open_issues_count":53,"forks_count":42,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-08-09T08:21:00.962Z","etag":null,"topics":["amap","angular","gaode","map","ng","ngx-amap"],"latest_commit_sha":null,"homepage":"https://xieziyu.github.io/ngx-amap","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/xieziyu.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}},"created_at":"2017-08-21T08:54:40.000Z","updated_at":"2024-12-27T19:39:13.000Z","dependencies_parsed_at":"2022-09-02T09:51:04.036Z","dependency_job_id":null,"html_url":"https://github.com/xieziyu/ngx-amap","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"purl":"pkg:github/xieziyu/ngx-amap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xieziyu%2Fngx-amap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xieziyu%2Fngx-amap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xieziyu%2Fngx-amap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xieziyu%2Fngx-amap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xieziyu","download_url":"https://codeload.github.com/xieziyu/ngx-amap/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xieziyu%2Fngx-amap/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274158750,"owners_count":25232628,"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-09-08T02:00:09.813Z","response_time":121,"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":["amap","angular","gaode","map","ng","ngx-amap"],"created_at":"2024-07-31T20:00:31.302Z","updated_at":"2025-09-08T08:37:30.418Z","avatar_url":"https://github.com/xieziyu.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# ngx-amap \n[![npm](https://img.shields.io/npm/v/ngx-amap.svg)][npm-badge-url]\n[![npm](https://img.shields.io/npm/dm/ngx-amap.svg)][npm-badge-url]\n[![Build Status](https://travis-ci.org/xieziyu/ngx-amap.svg?branch=master)][ci-url]\n\n+ [在线演示](https://xieziyu.github.io/ngx-amap)\n+ [模块文档](https://xieziyu.github.io/ngx-amap/api-doc)\n+ [CHANGELOG](https://github.com/xieziyu/ngx-amap/blob/master/CHANGELOG.md)\n\nngx-amap 是为在**Angular**(ver \u003e= 2.x)项目中便捷、高效地使用**高德地图**Javascript API而构建的组件集合\n\n## 目录\n1. [最新进度](#最新进度)\n2. [安装](#安装)\n3. [使用](#使用)\n4. [配置](#配置)\n5. [加载插件](#加载插件)\n6. [加载UI库](#加载UI库)\n7. [指令和服务](#指令和服务)\n8. [本地演示](#本地演示)\n\n# 最新进度\n2020.02.06: v3.0.0\n- NEW:\n  - 支持 `AMapUI` 库，可通过 `AmapUILoaderService` 服务加载使用，部分 UI 组件也封装成了指令，如：`ui-awesome-marker`\n  - 提供加载插件服务：`AmapPluginLoaderService`，部分常用插件已封装成了指令，如：`amap-tool-bar`\n\n- BREAKING CHANGES:\n  - 重写了整体的封装架构，不再使用 Promise 封装，全部使用 Observable\n  - `@Output` 事件命名统一调整为: 包含`na`前缀\n  - 不再提供 Getter 和 Setter 的 Wrapper，建议直接调用 `amap` 原生对象的方法\n  - 移除 amap 相关的类型定义，引入 `@types/amap-js-api`\n\n# 安装\n```bash\nnpm install -S ngx-amap\nnpm install -D @types/amap-js-api\n# 地图插件类型定义可按需安装：\nnpm install -D @types/amap-js-api-tool-bar\nnpm install -D @types/amap-js-api-heatmap\nnpm install -D @types/amap-js-api-autocomplete\nnpm install -D @types/amap-js-api-place-search\nnpm install -D @types/amap-js-api-driving\nnpm install -D @types/amap-js-api-transfer\n# ...\n```\n\n# 使用\n1. import `NgxAmapModule`\n    + Example:\n      ```typescript\n      import { NgxAmapModule } from 'ngx-amap';\n\n      @NgModule({\n        imports: [\n          ...,\n          NgxAmapModule.forRoot({\n            apiKey: '你申请的key'\n          })\n        ],\n        ...\n      })\n      export class AppModule { }\n      ```\n\n2. 使用 `ngx-amap` 组件时必须**给定高度**.\n    + 简单示例:\n\n      + html:\n      ```html\n      \u003cngx-amap class=\"demo-map\"\u003e\u003c/ngx-amap\u003e\n      ```\n\n      + css:\n      ```css\n      .demo-map {\n        height: 400px;\n      }\n      ```\n\n3. 可以配合使用其他指令和组件。例如 `amap-marker` 可以在地图中画覆盖物：点标记。\n    + 简单示例:\n\n      + html:\n      ```html\n      \u003cngx-amap class=\"demo-map\" [center]=\"[116.397428, 39.90923]\"\u003e\n        \u003camap-marker [position]=\"[116.397428, 39.90923]\" (markerClick)=\"onMarkerClick($event)\"\u003e\u003c/amap-marker\u003e\n      \u003c/ngx-amap\u003e\n      ```\n\n4. 加入地图控件的方法也很简单，例如：`amap-tool-bar`\n    + 简单示例:\n\n      + html:\n      ```html\n      \u003cngx-amap class=\"demo-map\"\u003e\n        \u003camap-tool-bar\u003e\u003c/amap-tool-bar\u003e\n      \u003c/ngx-amap\u003e\n      ```\n\n5. 由于采用了懒加载高德 JS 库，所以如果需要直接使用全局 `AMap` 对象的方法，需要等加载完成后使用。\n    - 可以在组件 `\u003cngx-amap\u003e` `(naReady)` 事件之后使用 `AMap`\n    - 也可以使用 `AMapLoaderService` 的 `load` 方法\n    ```ts\n    import { AMapLoaderService } from  'ngx-amap';\n\n    @Component({\n      ...\n    })\n    export class MyComponent implements OnInit {\n      constructor(private loader: AMapLoaderService) {}\n\n      ngOnInit() {\n        this.loader.load().subscribe(() =\u003e {\n          // 高德 JS SDK 加载完毕\n          const dis = AMap.GeometryUtil.distance([123, 456], [123, 456]);\n          console.log(dis: ${dis});\n        })\n      }\n    }\n    ```\n\n更多用法和事件，请参看演示和文档。\n\n# 配置\n我们可以通过`NgxAmapModule`的`forRoot()`方法设置`ngx-amap`。它可以接受以下参数传入：\n```typescript\n{\n  apiKey: string;   // 高德地图的开发者license key\n  apiVersion?: string;  // [可选], api 版本, 默认是 '1.4.15'\n  uiVersion?: string;   // [可选], ui 库版本, 默认是 '1.0.11'\n  protocol?: 'http' | 'https'; // [可选], api 路径协议类型\n  debug?: boolean; // [可选], 是否开启调试模式\n  debugTags?: string; // [可选], 开启调试的 TAG, '*' 为全部\n}\n```\n\n# 加载插件\n部分常用插件如: `AMap.ToolBar` 已封装成指令，可直接使用。\n\n插件可通过服务：`AmapPluginLoaderService` 加载后使用。若插件需要 mapObject，可配合 `ngx-amap` 的 `(naReady)` 事件一起使用。\n\n[查看示例](https://xieziyu.github.io/ngx-amap/#/services/amap-plugin-loader)\n\n# 加载UI库\n部分常用 UI 库如: `AMapUI.SimpleMarker` 已封装成指令，可直接使用。\n\nUI 库可通过服务：`AmapUILoaderService` 加载后使用。若 UI 需要使用 mapObject，可配合 `ngx-amap` 的 `(naReady)` 事件一起使用。\n\n[查看示例](https://xieziyu.github.io/ngx-amap/#/services/amap-ui-loader)\n\n# 指令和服务\n| NGX-AMAP | 类型 | 高德地图 | 类 | 演示示例 |\n| -------- | --- |------- | -- | -------- |\n|`ngx-amap`                 | `Component` | 地图 | **AMap.Map** | [demo](https://xieziyu.github.io/ngx-amap/#/components/ngx-amap) |\n|`amap-text`                | `Component` | 覆盖物：文本标记 | **AMap.Text** | [demo](https://xieziyu.github.io/ngx-amap/#/components/amap-text) |\n|`amap-info-window`         | `Component` | 信息窗体 | **AMap.InfoWindow** | [demo](https://xieziyu.github.io/ngx-amap/#/components/amap-info-window) |\n|`amap-marker`              | `Directive` | 覆盖物：点标记 | **AMap.Marker** | [demo](https://xieziyu.github.io/ngx-amap/#/directives/amap-marker) |\n|`amap-polyline`            | `Directive` | 覆盖物：折线 | **AMap.Polyline** | [demo](https://xieziyu.github.io/ngx-amap/#/directives/amap-polyline) |\n|`amap-polygon`             | `Directive` | 覆盖物：多边线 | **AMap.Polygon** | [demo](https://xieziyu.github.io/ngx-amap/#/directives/amap-polygon) |\n|`amap-bezier-curve`        | `Directive` | 覆盖物：贝塞尔曲线 | **AMap.BezierCurve** | [demo](https://xieziyu.github.io/ngx-amap/#/directives/amap-bezier-curve) |\n|`amap-ellipse`             | `Directive` | 覆盖物：椭圆 | **AMap.Ellipse** | [demo](https://xieziyu.github.io/ngx-amap/#/directives/amap-ellipse) |\n|`amap-circle`              | `Directive` | 覆盖物：圆 | **AMap.Circle** | [demo](https://xieziyu.github.io/ngx-amap/#/directives/amap-circle) |\n|`amap-circle-marker`       | `Directive` | 覆盖物：圆点标记 | **AMap.CircleMarker** | [demo](https://xieziyu.github.io/ngx-amap/#/directives/amap-circle-marker) |\n|`amap-rectangle`           | `Directive` | 覆盖物：矩形 | **AMap.Rectangle** | [demo](https://xieziyu.github.io/ngx-amap/#/directives/amap-rectangle) |\n|`amap-tool-bar`            | `Directive` | 工具条插件 | **AMap.ToolBar** | [demo](https://xieziyu.github.io/ngx-amap/#/plugins/amap-tool-bar) |\n|`amap-marker-clusterer`    | `Directive` | 点聚合插件 | **AMap.MarkerClusterer** | [demo](https://xieziyu.github.io/ngx-amap/#/plugins/amap-marker-cluster) |\n|`amap-heatmap`             | `Directive` | 图层：热力图 | **AMap.Heatmap** | [demo](https://xieziyu.github.io/ngx-amap/#/plugins/amap-heatmap) |\n|`ui-simple-marker`         | `Directive` | UI 简单标记 | **AMapUI.SimpleMarker** | [demo](https://xieziyu.github.io/ngx-amap/#/ui-directives/ui-simple-marker) |\n|`ui-awesome-marker`        | `Directive` | UI 字体图标标注 | **AMapUI.AwesomeMarker** | [demo](https://xieziyu.github.io/ngx-amap/#/ui-directives/ui-awesome-marker) |\n|`AmapPluginLoaderService`  | `Service`   | 插件加载 | **AMap.plugin** | [demo](https://xieziyu.github.io/ngx-amap/#/services/amap-amap-plugin-loader) |\n|`AmapUILoaderService`      | `Service`   | UI 库加载服务 | **AMapUI.loadUI** | [demo](https://xieziyu.github.io/ngx-amap/#/services/amap-ui-loader) |\n|`AmapAutocompleteService`  | `Service`   | 关键字提示服务 | **AMap.Autocomplete** | [demo](https://xieziyu.github.io/ngx-amap/#/services/amap-autocomplete) |\n\n# 本地演示\n1. clone 当前 repo 到本地\n2. 修改 `src/app/app.module.ts` 以使用自己的的高德API key\n3. 启动demo，浏览器打开: `localhost:8080`\n```bash\nnpm install\nnpm run demo\n# or\nyarn\nyarn demo\n```\n\n\n[npm-badge-url]: https://www.npmjs.com/package/ngx-amap\n[ci-url]: https://travis-ci.org/xieziyu/ngx-amap\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxieziyu%2Fngx-amap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxieziyu%2Fngx-amap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxieziyu%2Fngx-amap/lists"}