ngx-amap 是为在Angular(ver >= 2.x)项目中便捷、高效地使用高德地图Javascript API而构建的组件集合
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
-
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.1'
urlPath: string; // [可选], 默认是 'http://webapi.amap.com/maps', 可以用它设置HTTPS或者HTTP协议
}
ngx-amap
: 组件:地图容器amap-marker
: 指令:点标记amap-polyline
: 指令:折线amap-tool-bar
: 指令:地图控件amap-info-window
: 组件:信息窗体amap-marker-clusterer
: 指令:点聚合AmapGeocoderService
: 服务:地理编码AmapAutocompleteService
: 服务:搜索服务,输入提示input [amapAutocomplete]
: 指令:input扩展,搜索服务的输入提示AmapPlaceSearchService
: 服务:搜索服务,地点关键字搜索
可以从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 install
yarn demo