ngx-amap
ngx-amap 是为在Angular(ver >= 2.x)项目中便捷、高效地使用高德地图Javascript API而构建的组件集合
目录
- 最新进度
- 安装
- 使用
- 配置
- 加载插件
- 加载UI库
- 指令和服务
- 本地演示
最新进度
2020.02.06: v3.0.0
-
NEW:
- 支持
AMapUI
库,可通过 AmapUILoaderService
服务加载使用,部分 UI 组件也封装成了指令,如:ui-awesome-marker
- 提供加载插件服务:
AmapPluginLoaderService
,部分常用插件已封装成了指令,如:amap-tool-bar
-
BREAKING CHANGES:
- 重写了整体的封装架构,不再使用 Promise 封装,全部使用 Observable
@Output
事件命名统一调整为: 包含na
前缀- 不再提供 Getter 和 Setter 的 Wrapper,建议直接调用
amap
原生对象的方法 - 移除 amap 相关的类型定义,引入
@types/amap-js-api
安装
npm install -S ngx-amap
npm install -D @types/amap-js-api
npm install -D @types/amap-js-api-tool-bar
npm install -D @types/amap-js-api-heatmap
npm install -D @types/amap-js-api-autocomplete
npm install -D @types/amap-js-api-place-search
npm install -D @types/amap-js-api-driving
npm install -D @types/amap-js-api-transfer
使用
-
import NgxAmapModule
-
使用 ngx-amap
组件时必须给定高度.
-
可以配合使用其他指令和组件。例如 amap-marker
可以在地图中画覆盖物:点标记。
-
加入地图控件的方法也很简单,例如:amap-tool-bar
-
由于采用了懒加载高德 JS 库,所以如果需要直接使用全局 AMap
对象的方法,需要等加载完成后使用。
- 可以在组件
<ngx-amap>
(naReady)
事件之后使用 AMap
- 也可以使用
AMapLoaderService
的 load
方法
import { AMapLoaderService } from 'ngx-amap';
@Component({
...
})
export class MyComponent implements OnInit {
constructor(private loader: AMapLoaderService) {}
ngOnInit() {
this.loader.load().subscribe(() => {
const dis = AMap.GeometryUtil.distance([123, 456], [123, 456]);
console.log(dis: ${dis});
})
}
}
更多用法和事件,请参看演示和文档。
配置
我们可以通过NgxAmapModule
的forRoot()
方法设置ngx-amap
。它可以接受以下参数传入:
{
apiKey: string;
apiVersion?: string;
uiVersion?: string;
protocol?: 'http' | 'https';
debug?: boolean;
debugTags?: string;
}
加载插件
部分常用插件如: AMap.ToolBar
已封装成指令,可直接使用。
插件可通过服务:AmapPluginLoaderService
加载后使用。若插件需要 mapObject,可配合 ngx-amap
的 (naReady)
事件一起使用。
查看示例
加载UI库
部分常用 UI 库如: AMapUI.SimpleMarker
已封装成指令,可直接使用。
UI 库可通过服务:AmapUILoaderService
加载后使用。若 UI 需要使用 mapObject,可配合 ngx-amap
的 (naReady)
事件一起使用。
查看示例
指令和服务
NGX-AMAP | 类型 | 高德地图 | 类 | 演示示例 |
---|
ngx-amap | Component | 地图 | AMap.Map | demo |
amap-text | Component | 覆盖物:文本标记 | AMap.Text | demo |
amap-info-window | Component | 信息窗体 | AMap.InfoWindow | demo |
amap-marker | Directive | 覆盖物:点标记 | AMap.Marker | demo |
amap-polyline | Directive | 覆盖物:折线 | AMap.Polyline | demo |
amap-polygon | Directive | 覆盖物:多边线 | AMap.Polygon | demo |
amap-bezier-curve | Directive | 覆盖物:贝塞尔曲线 | AMap.BezierCurve | demo |
amap-ellipse | Directive | 覆盖物:椭圆 | AMap.Ellipse | demo |
amap-circle | Directive | 覆盖物:圆 | AMap.Circle | demo |
amap-circle-marker | Directive | 覆盖物:圆点标记 | AMap.CircleMarker | demo |
amap-rectangle | Directive | 覆盖物:矩形 | AMap.Rectangle | demo |
amap-tool-bar | Directive | 工具条插件 | AMap.ToolBar | demo |
amap-marker-clusterer | Directive | 点聚合插件 | AMap.MarkerClusterer | demo |
amap-heatmap | Directive | 图层:热力图 | AMap.Heatmap | demo |
ui-simple-marker | Directive | UI 简单标记 | AMapUI.SimpleMarker | demo |
ui-awesome-marker | Directive | UI 字体图标标注 | AMapUI.AwesomeMarker | demo |
AmapPluginLoaderService | Service | 插件加载 | AMap.plugin | demo |
AmapUILoaderService | Service | UI 库加载服务 | AMapUI.loadUI | demo |
AmapAutocompleteService | Service | 关键字提示服务 | AMap.Autocomplete | demo |
本地演示
- clone 当前 repo 到本地
- 修改
src/app/app.module.ts
以使用自己的的高德API key - 启动demo,浏览器打开:
localhost:8080
npm install
npm run demo
yarn
yarn demo