husha-amap v1.0.9

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.x for Angular < 6

Github branches:

• master for Angular >= 6
• v1.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

使用

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/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