ngx-amap 是为在Angular(ver >= 2.x)项目中便捷、高效地使用高德地图Javascript API而构建的组件集合
@npm:
v2.x
for Angular >= 6v1.x
for Angular < 6
Github branches:
master
for Angular >= 6v1.x
for Angular < 6
2019.09.23: v2.2.1 & v1.4.1
- 修复 Icon issue#40
2018.11.29: v2.2.0 & v1.4.0
- 新增支持路径规划:
- AMap.Driving 驾车路线规划服务:AmapDrivingService
- AMap.TruckDriving 货车路线规划服务:AmapTruckDrivingService
- AMap.Transfer 公交换乘路线规划服务:AmapTransferService
- AMap.Walking 步行路线规划服务:AmapWalkingService
- AMap.Riding 骑行路线规划服务:AmapRidingService
2018.06.22: v2.1.1 & v1.3.3
- Bugfix:[amapAutocomplete] 切换city时不起作用 issue#23
2018.05.24: v2.1.0
- 新增支持图层AMap.Heatmap指令:amap-heatmap
2018.05.11: v2.0.0: 支持 Angular 6
2018.04.17: v1.3.2:行政区查询
- 新增支持AMap.DistrictSearch行政区查询服务:AmapDistrictSearchService (感谢: noob9527)
2018.03.27: v1.3.1:覆盖物编辑功能 (传送门:高德开放平台API)
- demo AMap.CircleEditor编辑功能:amap-circle
[editor]="true"
- demo AMap.PolyEditor编辑功能:amap-polyline, amap-polygon
[editor]="true"
- demo AMap.BezierCurveEditor编辑功能:amap-bezier-curve
[editor]="true" [editorOptions]="editorOptions"
- demo AMap.EllipseEditor编辑功能:amap-ellipse
[editor]="true"
- demo AMap.RectangleEditor编辑功能:amap-rectangle
[editor]="true"
- 添加editor相关事件emitter,例如:
(editorAddnode)
,(editorAdjust)
等,详见示例
$ npm install ngx-amap --save
# or
$ yarn add ngx-amap
-
import
NgxAmapModule
- Example:
import { NgxAmapModule } from 'ngx-amap'; @NgModule({ imports: [ ..., NgxAmapModule.forRoot({ apiKey: '你申请的key' }) ], ... }) export class AppModule { }
- Example:
-
使用
ngx-amap
组件时必须给定高度.-
简单示例:
- html:
<ngx-amap class="demo-map"></ngx-amap>
- css:
.demo-map { height: 400px; }
-
-
可以配合使用其他指令和组件。例如
amap-marker
可以在地图中画覆盖物:点标记。-
简单示例:
- html:
<ngx-amap class="demo-map" [center]="[116.397428, 39.90923]"> <amap-marker [position]="[116.397428, 39.90923]" (markerClick)="onMarkerClick($event)"></amap-marker> </ngx-amap>
-
-
加入地图控件的方法也很简单,例如:
amap-tool-bar
-
简单示例:
- html:
<ngx-amap class="demo-map"> <amap-tool-bar></amap-tool-bar> </ngx-amap>
-
更多用法和事件,请参看演示和文档。
你可以通过NgxAmapModule
的forRoot()
方法设置ngx-amap
. 它可以接受以下参数传入:
{
apiKey: string; // *必须, 高德地图的开发者license key
apiVersion: string; // [可选],默认是'1.4.11'
urlPath: string; // [可选], 默认是 'https://webapi.amap.com/maps', 可以用它设置HTTPS或者HTTP协议
}
NGX-AMAP | 类型 | 高德地图 | 类 | 演示示例 |
---|---|---|---|---|
ngx-amap |
Component |
地图 | AMap.Map | demo |
amap-marker |
Directive |
覆盖物:点标记 | AMap.Marker | demo |
amap-text |
Directive |
覆盖物:文本标记 | AMap.Text | 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-info-window |
Component |
信息窗体 | AMap.InfoWindow | demo |
amap-tool-bar |
Directive |
工具条插件 | AMap.ToolBar | demo |
amap-marker-clusterer |
Directive |
点聚合插件 | AMap.MarkerClusterer | demo |
AmapGeocoderService |
Service |
地理编码服务 | AMap.Geocoder | demo |
AmapAutocompleteService |
Service |
关键字提示服务 | AMap.Autocomplete | demo |
AmapPlaceSearchService |
Service |
地点搜索服务 | AMap.PlaceSearch | demo |
AmapDistrictSearchService |
Service |
行政区搜索服务 | AMap.DistrictSearch | demo |
AmapMouseToolService |
Service |
鼠标工具插件 | AMap.MouseTool | demo |
amap-heatmap |
Directive |
图层:热力图 | AMap.Heatmap | demo |
AmapDrivingService |
Service |
驾车路线规划服务 | AMap.Driving | demo |
AmapTruckDrivingService |
Service |
货车路线规划服务 | AMap.TruckDriving | demo |
AmapTransferService |
Service |
换乘路线规划服务 | AMap.Transfer | demo |
AmapWalkingService |
Service |
步行路线规划服务 | AMap.Walking | demo |
AmapRidingService |
Service |
骑行路线规划服务 | AMap.Riding | demo |
可以从ngx-amap/types/class
中import对AMap类的声明:
import { Map, Marker, LngLat, Icon } from 'ngx-amap/types/class';
可以从ngx-amap/types/interface
中import对ngx-amap
所使用的Input类型需要的声明:
import { MarkerOptions, IPixel, IIcon } from 'ngx-amap/types/interface';
更多类型,请参看在线文档
- clone 当前 repo 到本地
- 修改
src/app/app.module.ts
以使用自己的的高德API key - 启动demo,浏览器打开:
localhost:8080
npm install
npm run demo
# or
yarn
yarn demo