fayuanliu / ngx-amap

angular 2+ component for AMap (Gaode map)

ngx-amap

• 在线演示
• 模块文档

ngx-amap 是为在Angular(ver >= 2.x)项目中便捷、高效地使用高德地图Javascript API而构建的组件集合

目录

1. 版本信息
2. 最新进度
3. 安装
4. 使用
5. 配置
6. 指令和服务
7. 类型声明
8. 本地演示

版本信息

@npm:

• v2.x for Angular >= 6
• v1.4.0 for Angular < 6

Github branches:

• master for Angular >= 6
• v1.x for Angular < 6

最新进度

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

使用

1. import NgxAmapModule

   • Example:

     import { NgxAmapModule } from 'ngx-amap';
     
     @NgModule({
       imports: [
         ...,
         NgxAmapModule.forRoot({
           apiKey: '你申请的key'
         })
       ],
       ...
     })
     export class AppModule { }

2. 使用 ngx-amap 组件时必须给定高度.

   • 简单示例:

     • html:

     <ngx-amap class="demo-map"></ngx-amap>

     • css:

     .demo-map {
       height: 400px;
     }

3. 可以配合使用其他指令和组件。例如 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>

4. 加入地图控件的方法也很简单，例如：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';

更多类型，请参看在线文档

本地演示

1. clone 当前 repo 到本地
2. 修改 src/app/app.module.ts 以使用自己的的高德API key
3. 启动demo，浏览器打开: localhost:8080

npm install
npm run demo
# or
yarn
yarn demo