oceankai / 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.0.0 for Angular >= 6
• v1.3.2 for Angular < 6

Github branches:

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

最新进度

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)等，详见示例

2018.03.26: v1.3.0: 覆盖物

• 新增支持覆盖物AMap.Polygon指令：amap-polygon
• 新增支持覆盖物AMap.Text指令：amap-text
• 新增支持覆盖物AMap.BezierCurve指令：amap-bezier-curve
• 新增支持覆盖物AMap.Ellipse指令：amap-ellipse
• 新增支持覆盖物AMap.Rectangle指令：amap-rectangle

2018.03.21: v1.2.0

• 新增支持AMap.MouseTool鼠标工具插件：AmapMouseToolService (感谢: noob9527)

2018.02.28: v1.1.2

• ngx-amap支持gridMapForeign选项，以显示国外的地图细节

2018.02.05: v1.1.1

• 新增支持覆盖物AMap.CircleMarker的指令：amap-circle-marker (需要高德API-v1.4.3支持)

2018.02.05: v1.1.0

• 新增支持覆盖物AMap.Circle的指令：amap-circle
• 默认高德API的baseUrl调整为https协议
• 默认高德API的版本调整为1.4.3

2017.11.29: v1.0.1

• 修复 input[Autocomplete] 指令事件错误的问题

2017.11.29: v1.0.0

• 新增支持AMap.PlaceSearch的搜索服务：AmapPlaceSearchService

2017.11.28: v1.0.0-beta.4

• 新增支持AMap.Geocoder的地理服务：AmapGeocoderService
• 新增支持AMap.Autocomplete的搜索服务和指令：AmapAutocompleteService, AmapAutocompleteDirective
• 逻辑变更：marker在没有position的时候不再绘制于默认位置
• 逻辑变更：info-window现在会跟随它的hostMarker改变位置

2017.11.24: 新增支持AMap.MakerClusterer点聚合：amap-marker-clusterer

2017.11.23: 重写了各个组件，尽可能齐全地为每个组件提供了public方法和output事件，以适配高德原生API

安装

$ 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.1'
  urlPath: string;  // [可选]， 默认是 'http://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

类型声明

可以从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 install
yarn demo