├── .gitignore
├── .prettierrc
├── .vscode
└── settings.json
├── LICENSE
├── README.md
├── angular.json
├── demo
├── app
│ ├── components
│ │ ├── apidoc
│ │ │ ├── docBaidumap.component.html
│ │ │ ├── docBaidumap.component.ts
│ │ │ ├── docCanvasLayer.component.ts
│ │ │ ├── docCanvasLayerOptions.component.ts
│ │ │ ├── docCenterAndZoom.component.ts
│ │ │ ├── docCircle.component.ts
│ │ │ ├── docControl.component.ts
│ │ │ ├── docControlAnchor.component.ts
│ │ │ ├── docHeatmap.component.ts
│ │ │ ├── docHeatmapData.component.ts
│ │ │ ├── docHeatmapOptions.component.ts
│ │ │ ├── docHeatmapPoint.component.ts
│ │ │ ├── docIcon.component.ts
│ │ │ ├── docMapOptions.component.ts
│ │ │ ├── docMapTypeEnum.component.ts
│ │ │ ├── docMarker.component.ts
│ │ │ ├── docMarkerClusterer.component.ts
│ │ │ ├── docMarkerClustererOptions.component.ts
│ │ │ ├── docMarkerLiteral.component.ts
│ │ │ ├── docMarkerOptions.component.ts
│ │ │ ├── docNavigationControlOptions.component.ts
│ │ │ ├── docNavigationControlType.component.ts
│ │ │ ├── docPoint.component.ts
│ │ │ ├── docPolygon.component.ts
│ │ │ ├── docPolyline.component.ts
│ │ │ ├── docPredictDate.component.ts
│ │ │ ├── docSize.component.ts
│ │ │ ├── docTextIconStyle.component.ts
│ │ │ ├── docTileLayer.component.ts
│ │ │ ├── docTileLayerOptions.component.ts
│ │ │ ├── docTrafficLayer.component.ts
│ │ │ ├── docTrafficLayerOptions.component.ts
│ │ │ ├── index.component.ts
│ │ │ ├── index.module.ts
│ │ │ ├── route.module.ts
│ │ │ └── sidebar.component.ts
│ │ ├── home
│ │ │ ├── about.component.ts
│ │ │ ├── contribute.component.ts
│ │ │ ├── github.component.ts
│ │ │ ├── index.component.ts
│ │ │ ├── index.module.ts
│ │ │ ├── route.module.ts
│ │ │ └── version.component.ts
│ │ ├── menu
│ │ │ ├── index.html
│ │ │ ├── index.styl
│ │ │ └── index.ts
│ │ └── quickstart
│ │ │ ├── import.component.ts
│ │ │ ├── index.component.ts
│ │ │ ├── index.module.ts
│ │ │ ├── install.component.ts
│ │ │ ├── route.module.ts
│ │ │ └── usage.component.ts
│ ├── d.component.html
│ ├── d.component.styl
│ ├── d.component.ts
│ ├── d.module.ts
│ ├── d.routing.module.ts
│ └── shared
│ │ ├── highlight.ts
│ │ └── index.module.ts
├── assets
│ ├── .gitkeep
│ └── markericon.png
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── route.module.ts
└── styles.styl
├── package.json
├── projects
└── lib
│ ├── README.md
│ ├── ng-package.json
│ ├── package.json
│ ├── src
│ ├── lib
│ │ ├── components
│ │ │ ├── canvaslayer.component.ts
│ │ │ ├── circle.component.ts
│ │ │ ├── control.component.ts
│ │ │ ├── heatmap.component.ts
│ │ │ ├── map.component.ts
│ │ │ ├── marker.component.ts
│ │ │ ├── markerClusterer.component.ts
│ │ │ ├── polygon.component.ts
│ │ │ ├── polyline.component.ts
│ │ │ ├── tilelayer.component.ts
│ │ │ └── trafficlayer.component.ts
│ │ ├── helpers
│ │ │ ├── object.ts
│ │ │ ├── transformer.ts
│ │ │ └── validate.ts
│ │ ├── index.ts
│ │ ├── providers
│ │ │ ├── mapService.ts
│ │ │ └── scriptLoader.ts
│ │ └── types
│ │ │ ├── Animation.ts
│ │ │ ├── BMap.ts
│ │ │ ├── BMapLib.ts
│ │ │ ├── Bounds.ts
│ │ │ ├── CanvasLayer.ts
│ │ │ ├── Circle.ts
│ │ │ ├── Control.ts
│ │ │ ├── Copyright.ts
│ │ │ ├── Heatmap.ts
│ │ │ ├── Icon.ts
│ │ │ ├── InfoWindow.ts
│ │ │ ├── Label.ts
│ │ │ ├── Map.ts
│ │ │ ├── MapType.ts
│ │ │ ├── Marker.ts
│ │ │ ├── MarkerClusterer.ts
│ │ │ ├── Overlay.ts
│ │ │ ├── Pixel.ts
│ │ │ ├── Point.ts
│ │ │ ├── Polygon.ts
│ │ │ ├── Polyline.ts
│ │ │ ├── Projection.ts
│ │ │ ├── Script.ts
│ │ │ ├── Size.ts
│ │ │ ├── TextIconOverlay.ts
│ │ │ ├── TileLayer.ts
│ │ │ └── TrafficLayer.ts
│ └── public-api.ts
│ ├── tsconfig.lib.json
│ └── tslint.json
├── tsconfig.app.json
├── tsconfig.json
├── tslint.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /demodist
6 | /tmp
7 | /out-tsc
8 | # Only exists if Bazel was run
9 | /bazel-out
10 |
11 | # dependencies
12 | /node_modules
13 |
14 | # profiling files
15 | chrome-profiler-events*.json
16 | speed-measure-plugin*.json
17 |
18 | # IDEs and editors
19 | /.idea
20 | .project
21 | .classpath
22 | .c9/
23 | *.launch
24 | .settings/
25 | *.sublime-workspace
26 |
27 | # IDE - VSCode
28 | .vscode/*
29 | !.vscode/settings.json
30 | !.vscode/tasks.json
31 | !.vscode/launch.json
32 | !.vscode/extensions.json
33 | .history/*
34 |
35 | # misc
36 | /.sass-cache
37 | /connect.lock
38 | /coverage
39 | /libpeerconnection.log
40 | npm-debug.log
41 | yarn-error.log
42 | testem.log
43 | /typings
44 |
45 | # System Files
46 | .DS_Store
47 | Thumbs.db
48 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "semi": false,
4 | "tabWidth": 2
5 | }
6 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "editor.formatOnSave": true,
3 | "typescript.validate.enable": true,
4 | "stylusSupremacy.insertBraces": false,
5 | "editor.tabSize": 2,
6 | "editor.insertSpaces": true
7 | }
8 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # angular2-baidu-map
2 |
3 | [![NPM version][npm-image]][npm-url]
4 | ![][david-url]
5 | ![][dt-url]
6 | ![][license-url]
7 |
8 | Baidu-Map module for Angular8
9 |
10 | Read full documentation here: [documentation](https://leftstick.github.io/angular2-baidu-map/)
11 |
12 | Read code example here: [example](https://github.com/leftstick/angular8-baidu-map-example)
13 |
14 | > Be aware that it is a totally rewrite version, therefore, backward compatibility is not considered
15 |
16 | * If you are using the previous version `3.x`, [read it here](https://github.com/leftstick/angular2-baidu-map/tree/3.x)
17 | * If you are using the previous version `4.x`, [read it here](https://github.com/leftstick/angular2-baidu-map/tree/4.x)
18 |
19 | ## Getting started
20 |
21 | ```bash
22 | npm install angular2-baidu-map
23 | ```
24 |
25 | ## Usage
26 |
27 | **app.module.ts**
28 |
29 | ```typescript
30 | import { BrowserModule } from '@angular/platform-browser'
31 | import { NgModule } from '@angular/core'
32 |
33 | import { AppComponent } from './app.component'
34 |
35 | import { BaiduMapModule } from 'angular2-baidu-map'
36 |
37 | @NgModule({
38 | declarations: [AppComponent],
39 | imports: [BrowserModule, BaiduMapModule.forRoot({ ak: 'your ak' })],
40 | providers: [],
41 | bootstrap: [AppComponent]
42 | })
43 | export class AppModule {}
44 | ```
45 |
46 | **app.component.ts**
47 |
48 | ```typescript
49 | import { Component } from '@angular/core'
50 |
51 | import { MapOptions } from 'angular2-baidu-map'
52 |
53 | @Component({
54 | selector: 'app-root',
55 | templateUrl: './app.component.html',
56 | styleUrls: []
57 | })
58 | export class AppComponent {
59 | options: MapOptions
60 |
61 | constructor() {
62 | this.options = {
63 | centerAndZoom: {
64 | lat: 39.920116,
65 | lng: 116.403703,
66 | zoom: 16
67 | },
68 | enableKeyboard: true
69 | }
70 | }
71 | }
72 | ```
73 |
74 | **app.component.html**
75 |
76 | ```html
77 |
2 | The baidu-map component is the core of this module. It is used to
3 | instantiate a Baidu Map object in your page. Every other component must be
4 | contained within a baidu-map for them to work.
5 |
6 | Usage
7 |
8 |
9 | <baidu-map [options]="expression" (loaded)="expression" (clicked)="expression"></baidu-map>
10 |
11 |
Attributes
14 | Required properties are in red
15 |
16 |
17 |
18 |
19 | Param
20 | Type
21 | Details
22 |
23 |
24 |
25 |
26 | options
27 | expression
29 | Literal for constructing baidu-map. See
30 | MapOptions
31 |
32 |
33 |
34 | loaded
35 | expression
37 | Expression to evaluate upon map instance loaded event. ($event
40 | object is available as
41 | map
46 | instance)
47 |
48 |
49 |
50 | clicked
51 | expression
53 | Expression to evaluate upon map click event. ($event
54 | object is passed by Baidu-Map directly)
55 |
56 |
57 |
58 |
59 |
60 | Example
61 |
63 |
<baidu-map [options]="opts" (clicked)="mapClick($event)"></baidu-map>
64 |
69 |
export class DemoComponent {
70 | public opts: MapOptions
71 |
72 | constructor() {
73 | this.opts = {
74 | centerAndZoom: {
75 | lat: 39.920116,
76 | lng: 116.403703,
77 | zoom: 16
78 | },
79 | enableKeyboard: true,
80 | mapType: MapTypeEnum.BMAP_SATELLITE_MAP
81 | }
82 | }
83 |
84 | public mapClick(e: any) {
85 | alert(\`The coordinate you chose is: ${e.point.lng} : ${e.point.lat}\`)
86 | }
87 | }
88 |
15 | The canvaslayer component is sub-component of
16 | baidu-map. It is used to add BMap.Canvaslayer to
17 | the map.
18 |
19 | Usage
20 |
21 |
22 | <baidu-map [options]="expression">
23 | <canvaslayer [options]="expression" (loaded)="expression"></canvaslayer>
24 | </baidu-map>
25 |
26 |
Attributes
29 | Required properties are in red
30 |
31 |
32 |
33 |
34 | Param
35 | Type
36 | Details
37 |
38 |
39 |
40 |
41 | options
42 | expression
44 | Literal for constructing canvaslayer. See
45 | CanvasLayerOptions
46 |
47 |
48 |
49 | loaded
50 | expression
52 | Expression to evaluate upon canvaslayer load event. ($event
55 | object is available as
56 | BMap.CanvasLayer )
61 |
62 |
63 |
64 |
65 |
66 | Example
67 |
68 |
73 |
74 |
75 |
76 | <baidu-map [options]="opts">
77 | <canvaslayer [options]="canvaslayerOptions" (loaded)="canvaslayerLoaded($event)"></canvaslayer>
78 | </baidu-map>
79 |
80 |
84 |
85 | import { BMapInstance, CanvasLayerOptions, MapOptions, BCanvasLayer } from 'angular2-baidu-map'
86 |
87 | export class DemoComponent {
88 | public opts: MapOptions
89 | public canvasOptions: CanvasLayerOptions
90 |
91 | constructor() {
92 | this.opts = {
93 | centerAndZoom: {
94 | lat: 39.915,
95 | lng: 116.404,
96 | zoom: 15
97 | }
98 | }
99 |
100 | this.canvaslayerOptions = {
101 | update(map: BMapInstance, canvas: HTMLCanvasElement) {
102 | const ctx = canvas.getContext('2d')
103 |
104 | if (!ctx) {
105 | return
106 | }
107 |
108 | ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
109 |
110 | ctx.fillStyle = 'blue'
111 | ctx.beginPath()
112 | var data = [new window.BMap.Point(116.404, 39.915)]
113 |
114 | for (var i = 0, len = data.length; i < len; i++) {
115 | var pixel = map.pointToPixel(data[i])
116 | ctx.fillRect(pixel.x, pixel.y, 30, 30)
117 | }
118 | }
119 | }
120 |
121 | }
122 |
123 | public canvaslayerLoaded(canvaslayer: BCanvasLayer): void {
124 | console.log('canvaslayer loaded', canvaslayer)
125 | }
126 | }
127 |
128 |
The literal describes a BMap.CanvasLayer instance.
8 |
9 |
10 |
11 | Property
12 | Type
13 | Details
14 |
15 |
16 |
17 |
18 | zIndex
19 | Number z-index property of canvas
22 |
23 | paneName
24 | String
26 | see paneName in
27 | paneName
31 |
32 |
33 |
34 | update
35 |
36 | (BMapInstance, HTMLCanvasElement) => void
37 |
38 | the main drawing logic
39 |
40 |
41 |
42 |
43 | Required properties are in red
44 | `
45 | })
46 | export class DocCanvasLayerOptionsComponent {
47 | constructor() {}
48 | }
49 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docCenterAndZoom.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'doc-center-and-zoom',
5 | styles: [],
6 | template: `
7 |
8 | The literal describes center point and zoom level for baidu-map instance.
9 |
10 |
11 |
12 |
13 |
14 | Property
15 | Type
16 | Details
17 |
18 |
19 |
20 |
21 | lng
22 | Number longitude of a geographic point
24 |
25 |
26 | lat
27 | Number latitude of a geographic point
29 |
30 |
31 | zoom
32 | Number zoom leve of the map. Range: 3 ~ 19
34 |
35 |
36 |
37 | Required properties are in red
38 | `
39 | })
40 | export class DocCenterAndZoomComponent {
41 | constructor() {}
42 | }
43 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docCircle.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | import { CircleOptions, Point, MapOptions, BCircle } from 'angular2-baidu-map'
4 |
5 | @Component({
6 | selector: 'doc-circle',
7 | styles: [],
8 | template: `
9 |
10 | The circle component is sub-component of
11 | baidu-map. It is used to add BMap.Circle to the
12 | map.
13 |
14 | Usage
15 |
16 |
17 | <baidu-map [options]="expression">
18 | <circle [center]="expression" [radius]="expression" [options]="expression" (loaded)="expression"></circle>
19 | </baidu-map>
20 |
21 |
Attributes
24 | Required properties are in red
25 |
26 |
27 |
28 |
29 | Param
30 | Type
31 | Details
32 |
33 |
34 |
35 |
36 | center
37 | expression
39 | Where to display this circle overlay. See
40 | point
41 |
42 |
43 |
44 | radius
45 | expression The radius of this circle, should be a number
47 |
48 |
49 | options
50 | expression
52 | Literal for constructing circle. See
53 | CircleOptions
57 |
58 |
59 |
60 | loaded
61 | expression
63 | Expression to evaluate upon circle load event. ($event
64 | object is available as
65 | BMap.Circle )
70 |
71 |
72 |
73 |
74 |
75 | Example
76 |
77 |
84 |
85 |
86 |
87 | <baidu-map [options]="opts">
88 | <circle [center]="center" radius="600" [options]="circleOptions" (loaded)="circleLoaded($event)"></circle>
89 | </baidu-map>
90 |
91 |
95 |
96 | export class DemoComponent {
97 | public opts: MapOptions
98 | public center: Point
99 | public circleOptions: CircleOptions
100 |
101 | constructor() {
102 | this.opts = {
103 | centerAndZoom: {
104 | lng: 116.404,
105 | lat: 39.915,
106 | zoom: 14
107 | }
108 | }
109 |
110 | this.center = {
111 | lng: 116.404,
112 | lat: 39.915
113 | }
114 |
115 | this.circleOptions = {
116 | strokeColor: 'blue',
117 | strokeWeight: 2
118 | }
119 |
120 |
121 | }
122 |
123 | public circleLoaded(circle: BCircle): void {
124 | console.log('circle loaded', circle)
125 | }
126 | }
127 |
128 |
21 | The control component is sub-component of
22 | baidu-map. It is used to add BMap.Control to the
23 | map.
24 |
25 | Usage
26 |
27 |
28 | <baidu-map [options]="expression">
29 | <control type="string" [options]="expression"></control>
30 | </baidu-map>
31 |
32 |
Attributes
35 | Required properties are in red
36 |
37 |
38 |
39 |
40 | Param
41 | Type
42 | Details
43 |
44 |
45 |
46 |
47 | type
48 | string
50 |
51 | What kind of control to be added to the map. Available options:
52 | navigation ,
57 | overviewmap ,
62 | scale ,
67 | maptype ,
72 | geolocation ,
77 | panorama
82 |
83 |
84 |
85 |
86 | options
87 | expression
89 | Literal for constructing control. See
90 | NavigationControlOptions
93 | for example
94 |
95 |
96 |
97 |
98 |
99 | Example
100 |
101 |
110 |
111 |
112 |
113 | <baidu-map [options]="opts">
114 | <control type="navigation" [options]="controlOpts" (loaded)="controlLoaded($event)"></control>
115 | <control type="overviewmap" [options]="overviewmapOpts"></control>
116 | <control type="scale" [options]="scaleOpts"></control>
117 | <control type="maptype" [options]="mapTypeOpts"></control>
118 | </baidu-map>
119 |
120 |
124 |
125 | import {
126 | ControlAnchor,
127 | MapOptions,
128 | MapTypeControlOptions,
129 | MapTypeControlType,
130 | NavigationControlOptions,
131 | NavigationControlType,
132 | OverviewMapControlOptions,
133 | ScaleControlOptions,
134 | BNavigationControl,
135 | MapTypeEnum
136 | } from 'angular2-baidu-map'
137 |
138 | export class DemoComponent {
139 | public opts: MapOptions
140 | public controlOpts: NavigationControlOptions
141 | public overviewmapOpts: OverviewMapControlOptions
142 | public scaleOpts: ScaleControlOptions
143 | public mapTypeOpts: MapTypeControlOptions
144 |
145 | constructor() {
146 | this.opts = {
147 | centerAndZoom: {
148 | lat: 31.244604,
149 | lng: 121.51606,
150 | zoom: 16
151 | }
152 | }
153 |
154 | this.controlOpts = {
155 | anchor: ControlAnchor.BMAP_ANCHOR_TOP_LEFT,
156 | type: NavigationControlType.BMAP_NAVIGATION_CONTROL_LARGE
157 | }
158 |
159 | this.overviewmapOpts = {
160 | anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_RIGHT,
161 | isOpen: true
162 | }
163 |
164 | this.scaleOpts = {
165 | anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_LEFT
166 | }
167 |
168 | this.mapTypeOpts = {
169 | type: MapTypeControlType.BMAP_MAPTYPE_CONTROL_HORIZONTAL,
170 | mapTypes: [MapTypeEnum.BMAP_NORMAL_MAP, MapTypeEnum.BMAP_SATELLITE_MAP]
171 | }
172 |
173 | }
174 |
175 | public controlLoaded(control: BNavigationControl): void {
176 | console.log('control loaded', control)
177 | }
178 |
179 | }
180 |
181 |
8 | The enum to describe where the control to be displayed.
9 |
10 |
11 |
12 |
13 | Property
14 | Type
15 | Value
16 |
17 |
18 |
19 |
20 | BMAP_ANCHOR_TOP_LEFT
21 | Number 0
23 |
24 |
25 | BMAP_ANCHOR_TOP_RIGHT
26 | Number 1
28 |
29 |
30 | BMAP_ANCHOR_BOTTOM_LEFT
31 | Number 2
33 |
34 |
35 | BMAP_ANCHOR_BOTTOM_RIGHT
36 | Number 3
38 |
39 |
40 |
41 | `
42 | })
43 | export class DocControlAnchorComponent {
44 | constructor() {}
45 | }
46 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docHeatmapData.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'doc-heatmap-data',
5 | styles: [],
6 | template: `
7 |
8 | The data describes how a BMapLib.HeatmapOverlay displayed.
9 |
10 |
11 |
12 |
13 | Property
14 | Type
15 | Details
16 |
17 |
18 |
19 |
20 | data
21 | Array Array of HeatmapPoint
23 |
24 |
25 | max
26 | Number Max weight of the heatmap
28 |
29 |
30 |
31 |
32 | Required properties are in red
33 | `
34 | })
35 | export class DocHeatmapDataComponent {
36 | constructor() {}
37 | }
38 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docHeatmapOptions.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'doc-heatmap-options',
5 | styles: [],
6 | template: `
7 |
8 | The literal describes how a BMapLib.HeatmapOverlay constructed.
9 |
10 |
11 |
12 |
13 | Property
14 | Type
15 | Details
16 |
17 |
18 |
19 |
20 | radius
21 | Number Radius of the heatmap
23 |
24 |
25 | visible
26 | Boolean Whether to display the heatmap
28 |
29 |
30 | gradient
31 | Object Gradient of the heatmap
33 |
34 |
35 | opacity
36 | Number Opacity of the heatmap
38 |
39 |
40 |
41 |
42 | Required properties are in red
43 | `
44 | })
45 | export class DocHeatmapOptionsComponent {
46 | constructor() {}
47 | }
48 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docHeatmapPoint.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'doc-heatmap-point',
5 | styles: [],
6 | template: `
7 |
8 | The data describes the display unit of heatmap.
9 |
10 |
11 |
12 |
13 | Property
14 | Type
15 | Details
16 |
17 |
18 |
19 |
20 | lng
21 | Number Longitude of this display unit
23 |
24 |
25 | lat
26 | Number Latitude of this display unit
28 |
29 |
30 | count
31 | Number Weight of this display unit
33 |
34 |
35 |
36 |
37 | Required properties are in red
38 | `
39 | })
40 | export class DocHeatmapPointComponent {
41 | constructor() {}
42 | }
43 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docIcon.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'doc-icon',
5 | styles: [],
6 | template: `
7 |
8 | The literal describes a BMap.Icon instance.
9 |
10 |
11 |
12 |
13 | Property
14 | Type
15 | Details
16 |
17 |
18 |
19 |
20 | anchor
21 | Object See: Size
23 |
24 |
25 | size
26 | Object See: Size
28 |
29 |
30 | imageOffset
31 | Object See: Size
33 |
34 |
35 | imageSize
36 | Object See: Size
38 |
39 |
40 | imageUrl
41 | String URL of the customized icon
43 |
44 |
45 | infoWindowAnchor
46 | Object See: Size
48 |
49 |
50 | printImageUrl
51 | String Only for IE6. You won't use it in most cases
53 |
54 |
55 |
56 | Required properties are in red
57 | `
58 | })
59 | export class DocIconComponent {
60 | constructor() {}
61 | }
62 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docMapOptions.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'doc-map-options',
5 | styles: [],
6 | template: `
7 | The literal for constructing a baidu-map instance.
8 |
9 | Basic options introduced at
10 | MapOptions
15 | are supported.
16 |
17 |
18 |
19 |
20 |
21 | Property
22 | Type
23 | Details
24 |
25 |
26 |
27 |
28 | minZoom
29 | Number Minimal zoom level of the map
32 |
33 | maxZoom
34 | Number Maximal zoom level of the map
37 |
38 | enableHighResolution
39 | Boolean
41 |
42 | Whether to use high resolution map. Default: true
43 |
44 |
45 |
46 |
47 | enableAutoResize
48 | Boolean
50 |
51 | Whether to use auto-resize function. Default: true
52 |
53 |
54 |
55 |
56 | enableMapClick
57 | Boolean
59 |
60 | Whether to enable map click. Default: true
61 |
62 |
63 |
64 |
65 | disableDragging
66 | Boolean
68 | Whether to disable map dragable function
69 |
70 |
71 |
72 | enableScrollWheelZoom
73 | Boolean
75 |
76 | Whether to enable wheel for zooming function
77 |
78 |
79 |
80 |
81 | disableDoubleClickZoom
82 | Boolean
84 |
85 | Whether to disable double click for zooming function
86 |
87 |
88 |
89 |
90 | enableKeyboard
91 | Boolean
93 |
94 | Whether to enable keyboard for moving map function. You can use
95 | up, right, down,
96 | left, to move map.
97 |
98 |
99 |
100 |
101 | enableInertialDragging
102 | Boolean
104 | Whether to enable inertial drag function
105 |
106 |
107 |
108 | enableContinuousZoom
109 | Boolean
111 |
112 | Whether to enable continuous zooming function
113 |
114 |
115 |
116 |
117 | disablePinchToZoom
118 | Boolean
120 |
121 | Whether to disable pinch for zooming function
122 |
123 |
124 |
125 |
126 | cursor
127 | String
129 |
130 | Set default style of cursor, should follow CSS specification
131 |
132 |
133 |
134 |
135 | draggingCursor
136 | String
138 |
139 | Set default style of dragging cursor, should follow CSS
140 | specification
141 |
142 |
143 |
144 |
145 | currentCity
146 | String Set current city. Like: 北京市
149 |
150 | centerAndZoom
151 | Object
153 |
154 | See centerAndZoom
155 |
156 |
157 |
158 |
159 | mapType
160 | Object
162 | Should be an instance of
163 | BMap.MapType , or constant MapTypeEnum
167 |
168 |
169 |
170 |
171 | Required properties are in red
172 | `
173 | })
174 | export class DocMapOptionsComponent {
175 | constructor() {}
176 | }
177 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docMapTypeEnum.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'doc-maptypeenum',
5 | styles: [],
6 | template: `
7 |
8 | The constant enum for constructing specifing a MapType
9 |
10 |
11 |
12 |
13 | Property
14 | Type
15 | Details
16 |
17 |
18 |
19 |
20 | BMAP_NORMAL_MAP
21 | BMAP_NORMAL_MAP Normal street view
23 |
24 |
25 | BMAP_PERSPECTIVE_MAP
26 | BMAP_PERSPECTIVE_MAP Normal perspective view
28 |
29 |
30 | BMAP_SATELLITE_MAP
31 | BMAP_SATELLITE_MAP Normal satellite view
33 |
34 |
35 | BMAP_HYBRID_MAP
36 | BMAP_HYBRID_MAP Normal hybrid view
38 |
39 |
40 |
41 |
42 | Required properties are in red
43 | `
44 | })
45 | export class DocMapTypeEnumComponent {
46 | constructor() {}
47 | }
48 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docMarker.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | import {
4 | Animation,
5 | MapOptions,
6 | BMarker,
7 | BMapInstance,
8 | MarkerOptions,
9 | Point
10 | } from 'angular2-baidu-map'
11 | import { environment } from '@/environments/environment'
12 |
13 | @Component({
14 | selector: 'doc-marker',
15 | styles: [],
16 | template: `
17 |
18 | The marker component is sub-component of
19 | baidu-map. It is used to add BMap.Marker to the
20 | map.
21 |
22 | Usage
23 |
24 |
25 | <baidu-map [options]="expression">
26 | <marker [point]="expression" [options]="expression" (loaded)="expression" (clicked)="expression"></marker>
27 | </baidu-map>
28 |
29 |
Attributes
32 | Required properties are in red
33 |
34 |
35 |
36 |
37 | Param
38 | Type
39 | Details
40 |
41 |
42 |
43 |
44 | point
45 | expression
47 | Where to display the marker. See point
48 |
49 |
50 |
51 | options
52 | expression
54 | Literal for constructing marker. See
55 | MarkerOptions
56 |
57 |
58 |
59 | loaded
60 | expression
62 | Expression to evaluate upon marker load event. ($event
63 | object is available as
64 | BMap.Marker )
69 |
70 |
71 |
72 | clicked
73 | expression
75 | Expression to evaluate upon marker click event. (Three objects
76 | passed to this callback, e for event,
77 | marker for instance of
78 | BMap.Marker , map for instance of
83 | BMap.Map )
88 |
89 |
90 |
91 |
92 |
93 | Example
94 |
95 |
103 |
104 |
105 |
106 | <baidu-map [options]="opts">
107 | <marker
108 | *ngFor="let marker of markers"
109 | [point]="marker.point"
110 | [options]="marker.options"
111 | (clicked)="showWindow($event)"
112 | (loaded)="setAnimation($event)" >
113 | </marker>
114 | </baidu-map>
115 |
116 |
120 |
121 | import { Animation, MapOptions, BMarker, BMapInstance, MarkerOptions, Point } from 'angular2-baidu-map'
122 |
123 | export class DemoComponent {
124 | public opts: MapOptions
125 | public markers: Array<{ point: Point; options?: MarkerOptions }>
126 |
127 | constructor() {
128 | this.opts = {
129 | centerAndZoom: {
130 | lat: 31.244604,
131 | lng: 121.51606,
132 | zoom: 16
133 | }
134 | }
135 |
136 | this.markers = [
137 | {
138 | options: {
139 | icon: {
140 | imageUrl: '/assets/markericon.png',
141 | size: {
142 | height: 35,
143 | width: 25
144 | },
145 | imageSize: {
146 | height: 35,
147 | width: 25
148 | }
149 | }
150 | },
151 | point: {
152 | lat: 31.244604,
153 | lng: 121.51606
154 | }
155 | },
156 | {
157 | point: {
158 | lat: 31.246124,
159 | lng: 121.51232
160 | }
161 | }
162 | ]
163 |
164 |
165 | }
166 |
167 | public setAnimation(marker: BMarker): void {
168 | marker.setAnimation(Animation.BMAP_ANIMATION_BOUNCE)
169 | }
170 |
171 | public showWindow({ marker, map }: { marker: BMarker; map: BMapInstance }): void {
172 | map.openInfoWindow(
173 | new window.BMap.InfoWindow('地址：浦东南路360号', {
174 | offset: new window.BMap.Size(0, -30),
175 | title: '新上海国际大厦'
176 | }),
177 | marker.getPosition()
178 | )
179 | }
180 | }
181 |
182 |
15 | The marker-clusterer component is sub-component of
16 | baidu-map. It is used to add
17 | BMapLib.MarkerClusterer to the map.
18 |
19 | Usage
20 |
21 |
22 | <baidu-map [options]="expression">
23 | <marker-clusterer [options]="expression" (loaded)="expression"></marker-clusterer>
24 | </baidu-map>
25 |
26 |
Attributes
29 | Required properties are in red
30 |
31 |
32 |
33 |
34 | Param
35 | Type
36 | Details
37 |
38 |
39 |
40 |
41 | options
42 | expression
44 | Literal for constructing MarkerClusterer. See
45 | MarkerClustererOptions
48 |
49 |
50 |
51 | loaded
52 | expression
54 | Expression to evaluate upon marker-clusterer load event. ($event
57 | object is available as
58 | BMapLib.MarkerClusterer )
63 |
64 |
65 |
66 |
67 |
68 | Example
69 |
70 |
75 |
76 |
77 |
78 | <baidu-map [options]="opts">
79 | <marker-clusterer [options]="clustererOptions" (loaded)="markerClustererLoaded($event)"></marker-clusterer>
80 | </baidu-map>
81 |
82 |
86 |
87 | export class DemoComponent {
88 | public opts: MapOptions
89 | public clustererOptions: MarkerClustererOptions
90 |
91 | constructor() {
92 | this.opts = {
93 | centerAndZoom: {
94 | lat: 39.915,
95 | lng: 116.404,
96 | zoom: 14
97 | }
98 | }
99 |
100 | this.clustererOptions = {
101 | markers: this.getRandomMarkers()
102 | }
103 |
104 |
105 | }
106 |
107 | private getRandomMarkers() {
108 | const markers: Array<Marker> = []
109 |
110 | for (let i = 0; i < 20; i++) {
111 | markers.push({
112 | point: {
113 | lng: Math.random() * 40 + 85,
114 | lat: Math.random() * 30 + 21
115 | }
116 | })
117 | }
118 | return markers
119 | }
120 |
121 | public markerClustererLoaded(clusterer: BMarkerClusterer): void {
122 | console.log('clusterer loaded', clusterer)
123 | }
124 | }
125 |
126 |
= []
149 |
150 | for (let i = 0; i < 20; i++) {
151 | markers.push({
152 | point: {
153 | lng: Math.random() * 40 + 85,
154 | lat: Math.random() * 30 + 21
155 | }
156 | })
157 | }
158 | return markers
159 | }
160 |
161 | public markerClustererLoaded(clusterer: BMarkerClusterer): void {
162 | console.log('clusterer loaded', clusterer)
163 | }
164 | }
165 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docMarkerClustererOptions.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'doc-marker-clusterer-options',
5 | styles: [],
6 | template: `
7 |
8 | The literal describes a BMapLib.MarkerClusterer instance.
9 |
10 |
11 |
12 |
13 | Property
14 | Type
15 | Details
16 |
17 |
18 |
19 |
20 | markers
21 | Array<Marker> See: Marker
23 |
24 |
25 | girdSize
26 | Number Pixel to be used in clusterer grid, 60 by default
28 |
29 |
30 | maxZoom
31 | Number Maximum clusterer level
33 |
34 |
35 | minClusterSize
36 | Number Minimum clusterer level, 2 by default
38 |
39 |
40 | isAverangeCenter
41 | Boolean Whether to use the averange as the center point. false by default
43 |
44 |
45 | styles
46 | Array<TextIconStyle> See: TextIconStyle
48 |
49 |
50 |
51 |
52 | Required properties are in red
53 | `
54 | })
55 | export class DocMarkerClustererOptionsComponent {
56 | constructor() {}
57 | }
58 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docMarkerLiteral.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'doc-marker-literal',
5 | styles: [],
6 | template: `
7 |
8 | The literal describes a BMap.Marker instance.
9 |
10 |
11 |
12 |
13 | Property
14 | Type
15 | Details
16 |
17 |
18 |
19 |
20 | point
21 | Object See: Point
23 |
24 |
25 | options
26 | Object See: MarkerOptions
28 |
29 |
30 |
31 |
32 | Required properties are in red
33 | `
34 | })
35 | export class DocMarkerLiteralComponent {
36 | constructor() {}
37 | }
38 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docMarkerOptions.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'doc-marker-options',
5 | styles: [],
6 | template: `
7 |
8 | The literal describes options used by BMap.Marker instance.
9 |
10 |
11 |
12 |
13 | Property
14 | Type
15 | Details
16 |
17 |
18 |
19 |
20 | offset
21 | Object See: Size
23 |
24 |
25 | icon
26 | Object See: Icon
28 |
29 |
30 | enableMassClear
31 | Boolean Whether to allow overlay to be clear while calling map.clearOverlays
33 |
34 |
35 | enableDragging
36 | Boolean Whether to enable dragging of the map
38 |
39 |
40 | enableClicking
41 | Boolean Whether to enable clicking of the map
43 |
44 |
45 | raiseOnDrag
46 | Boolean Whether to enable leave-animation on markers while dragging
48 |
49 |
50 | draggingCursor
51 | String Cursor style while dragging
53 |
54 |
55 | rotation
56 | Number Rotation angle
58 |
59 |
60 | shadow
61 | Object See: Icon
63 |
64 |
65 | title
66 | String Title to be displayed while mouse over on the marker
68 |
69 |
70 |
71 |
72 | Required properties are in red
73 | `
74 | })
75 | export class DocMarkerOptionsComponent {
76 | constructor() {}
77 | }
78 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docNavigationControlOptions.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'doc-navigation-control-options',
5 | styles: [],
6 | template: `
7 |
8 | The literal describes a BMap.NavigationControl instance.
9 |
10 |
11 |
12 |
13 | Property
14 | Type
15 | Details
16 |
17 |
18 |
19 |
20 | anchor
21 | Enum See: ControlAnchor
23 |
24 |
25 | offset
26 | Object See: Size
28 |
29 |
30 | type
31 | Enum See: NavigationControlType
33 |
34 |
35 | showZoomInfo
36 | Boolean Whether to display zoom information
38 |
39 |
40 | enableGeolocation
41 | Boolean Whether to enable Geolocation function
43 |
44 |
45 |
46 | Required properties are in red
47 | `
48 | })
49 | export class DocNavigationControlOptionsComponent {
50 | constructor() {}
51 | }
52 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docNavigationControlType.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'doc-navigation-control-type',
5 | styles: [],
6 | template: `
7 |
8 | The enum to describe what kind of navigation it is.
9 |
10 |
11 |
12 |
13 | Property
14 | Type
15 | Value
16 |
17 |
18 |
19 |
20 | BMAP_NAVIGATION_CONTROL_LARGE
21 | Number 0
23 |
24 |
25 | BMAP_NAVIGATION_CONTROL_SMALL
26 | Number 1
28 |
29 |
30 | BMAP_NAVIGATION_CONTROL_PAN
31 | Number 2
33 |
34 |
35 | BMAP_NAVIGATION_CONTROL_ZOOM
36 | Number 3
38 |
39 |
40 |
41 | `
42 | })
43 | export class DocNavigationControlTypeComponent {
44 | constructor() {}
45 | }
46 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docPoint.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'doc-point',
5 | styles: [],
6 | template: `
7 |
8 | The literal describes a BMap.Point instance.
9 |
10 |
11 |
12 |
13 | Property
14 | Type
15 | Details
16 |
17 |
18 |
19 |
20 | longitude
21 | Number longitude of a geographic point
23 |
24 |
25 | latitude
26 | Number latitude of a geographic point
28 |
29 |
30 |
31 | Required properties are in red
32 | `
33 | })
34 | export class DocPointComponent {
35 | constructor() {}
36 | }
37 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docPolygon.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | import { PolygonOptions, Point, MapOptions, BPolygon } from 'angular2-baidu-map'
4 |
5 | @Component({
6 | selector: 'doc-polygon',
7 | styles: [],
8 | template: `
9 |
10 | The polygon component is sub-component of
11 | baidu-map. It is used to add BMap.Polygon to the
12 | map.
13 |
14 | Usage
15 |
16 |
17 | <baidu-map [options]="expression">
18 | <polygon [points]="expression" [options]="expression" (loaded)="expression"></polygon>
19 | </baidu-map>
20 |
21 |
Attributes
24 | Required properties are in red
25 |
26 |
27 |
28 |
29 | Param
30 | Type
31 | Details
32 |
33 |
34 |
35 |
36 | points
37 | expression
39 | How the polygon draws. It should be an Array of point. See
40 | point
41 |
42 |
43 |
44 | options
45 | expression
47 | Literal for constructing polygon. See
48 | PolygonOptions
52 |
53 |
54 |
55 | loaded
56 | expression
58 | Expression to evaluate upon polygon load event. ($event
59 | object is available as
60 | BMap.Polygon )
65 |
66 |
67 |
68 |
69 |
70 | Example
71 |
72 |
78 |
79 |
80 |
81 | <baidu-map [options]="opts">
82 | <polygon [points]="points" [options]="polygonOptions" (loaded)="polygonLoaded($event)"></polygon>
83 | </baidu-map>
84 |
85 |
89 |
90 | export class DemoComponent {
91 | public opts: MapOptions
92 | public points: Array<Point>
93 | public polygonOptions: PolygonOptions
94 |
95 | constructor() {
96 | this.opts = {
97 | centerAndZoom: {
98 | lat: 39.915,
99 | lng: 116.404,
100 | zoom: 14
101 | }
102 | }
103 |
104 | this.points = [{
105 | lng: 116.387112,
106 | lat: 39.920977
107 | }, {
108 | lng: 116.385243,
109 | lat: 39.913063
110 | }, {
111 | lng: 116.394226,
112 | lat: 39.917988
113 | }, {
114 | lng: 116.401772,
115 | lat: 39.921364
116 | }, {
117 | lng: 116.41248,
118 | lat: 39.927893
119 | }]
120 |
121 | this.polygonOptions = {
122 | strokeColor: 'blue',
123 | strokeWeight: 2
124 | }
125 |
126 |
127 | }
128 |
129 | public polygonLoaded(polygon: BPolygon): void {
130 | console.log('polygon loaded', polygon)
131 | }
132 | }
133 |
134 |
140 | public polygonOptions: PolygonOptions
141 |
142 | constructor() {
143 | this.opts = {
144 | centerAndZoom: {
145 | lat: 39.915,
146 | lng: 116.404,
147 | zoom: 14
148 | }
149 | }
150 |
151 | this.points = [
152 | {
153 | lng: 116.387112,
154 | lat: 39.920977
155 | },
156 | {
157 | lng: 116.385243,
158 | lat: 39.913063
159 | },
160 | {
161 | lng: 116.394226,
162 | lat: 39.917988
163 | },
164 | {
165 | lng: 116.401772,
166 | lat: 39.921364
167 | },
168 | {
169 | lng: 116.41248,
170 | lat: 39.927893
171 | }
172 | ]
173 |
174 | this.polygonOptions = {
175 | strokeColor: 'blue',
176 | strokeWeight: 2
177 | }
178 | }
179 |
180 | public polygonLoaded(polygon: BPolygon): void {
181 | console.log('polygon loaded', polygon)
182 | }
183 | }
184 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docPolyline.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | import {
4 | PolylineOptions,
5 | Point,
6 | MapOptions,
7 | BPolyline
8 | } from 'angular2-baidu-map'
9 |
10 | @Component({
11 | selector: 'doc-polyline',
12 | styles: [],
13 | template: `
14 |
15 | The polyline component is sub-component of
16 | baidu-map. It is used to add BMap.Polyline to
17 | the map.
18 |
19 | Usage
20 |
21 |
22 | <baidu-map [options]="expression">
23 | <polyline [points]="expression" [options]="expression" (loaded)="expression" (clicked)="expression"></polyline>
24 | </baidu-map>
25 |
26 |
Attributes
29 | Required properties are in red
30 |
31 |
32 |
33 |
34 | Param
35 | Type
36 | Details
37 |
38 |
39 |
40 |
41 | points
42 | expression
44 | How the polyline draws. It should be an Array of point. See
45 | point
46 |
47 |
48 |
49 | options
50 | expression
52 | Literal for constructing polyline. See
53 | PolylineOptions
57 |
58 |
59 |
60 | loaded
61 | expression
63 | Expression to evaluate upon polyline load event. ($event
66 | object is available as
67 | BMap.Polyline )
72 |
73 |
74 |
75 | clicked
76 | expression
78 | Expression to evaluate upon polyline click event. (Three objects
79 | passed to this callback,
80 | e for event, polyline for instance of
81 | BMap.Polyline , map for instance of
86 | BMap.Map )
91 |
92 |
93 |
94 |
95 |
96 | Example
97 |
98 |
105 |
106 |
107 |
108 | <baidu-map [options]="opts">
109 | <polyline [points]="points"
110 | [options]="polylineOptions"
111 | (loaded)="polylineLoaded($event)"
112 | (clicked)="polylineClicked($event)" >
113 | </polyline>
114 | </baidu-map>
115 |
116 |
120 |
121 | export class DemoComponent {
122 | public opts: MapOptions
123 | public points: Array<Point>
124 | public polylineOptions: PolylineOptions
125 |
126 | constructor() {
127 | this.opts = {
128 | centerAndZoom: {
129 | lat: 39.915,
130 | lng: 116.404,
131 | zoom: 14
132 | }
133 | }
134 |
135 | this.points = [
136 | {
137 | lat: 39.910,
138 | lng: 116.399
139 | }, {
140 | lat: 39.920,
141 | lng: 116.405
142 | }, {
143 | lat: 39.900,
144 | lng: 116.425
145 | }
146 | ]
147 |
148 | this.polylineOptions = {
149 | strokeColor: 'blue',
150 | strokeWeight: 2
151 | }
152 |
153 | setTimeout(() => {
154 | this.points = [
155 | {
156 | lat: 39.945255,
157 | lng: 116.372648
158 | },
159 | {
160 | lat: 39.916042,
161 | lng: 116.434452
162 | },
163 | {
164 | lat: 39.902316,
165 | lng: 116.372648
166 | }
167 | ]
168 | }, 5000)
169 |
170 |
171 | }
172 |
173 | public polylineLoaded(polyline: BPolyline): void {
174 | console.log('polyline loaded', polyline)
175 | }
176 |
177 | public polylineClicked({ polyline }): void {
178 | console.log('polyline clicked', click)
179 | }
180 |
181 | }
182 |
183 |
189 | public polylineOptions: PolylineOptions
190 |
191 | constructor() {
192 | this.opts = {
193 | centerAndZoom: {
194 | lat: 39.915,
195 | lng: 116.404,
196 | zoom: 14
197 | }
198 | }
199 |
200 | this.points = [
201 | {
202 | lat: 39.91,
203 | lng: 116.399
204 | },
205 | {
206 | lat: 39.92,
207 | lng: 116.405
208 | },
209 | {
210 | lat: 39.9,
211 | lng: 116.425
212 | }
213 | ]
214 |
215 | this.polylineOptions = {
216 | strokeColor: 'blue',
217 | strokeWeight: 2
218 | }
219 |
220 | setTimeout(() => {
221 | this.points = [
222 | {
223 | lat: 39.945255,
224 | lng: 116.372648
225 | },
226 | {
227 | lat: 39.916042,
228 | lng: 116.434452
229 | },
230 | {
231 | lat: 39.902316,
232 | lng: 116.372648
233 | }
234 | ]
235 | }, 5000)
236 | }
237 |
238 | public polylineLoaded(polyline: BPolyline): void {
239 | console.log('polyline loaded', polyline)
240 | }
241 |
242 | public polylineClicked({ polyline }): void {
243 | console.log('polyline clicked', polyline)
244 | }
245 | }
246 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docPredictDate.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'doc-predictdate',
5 | styles: [],
6 | template: `
7 |
8 | The literal describes a BMap.PredictDate instance.
9 |
10 |
11 |
12 |
13 | Property
14 | Type
15 | Details
16 |
17 |
18 |
19 |
20 | weekday
21 | Number Predict week number, 1 ~ 7
23 |
24 |
25 | hour
26 | Number Predict hour number, 0 ~ 23
28 |
29 |
30 |
31 |
32 | Required properties are in red
33 | `
34 | })
35 | export class DocPredictDateComponent {
36 | constructor() {}
37 | }
38 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docSize.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'doc-size',
5 | styles: [],
6 | template: `
7 |
8 | The literal describes a BMap.Size instance.
9 |
10 |
11 |
12 |
13 | Property
14 | Type
15 | Details
16 |
17 |
18 |
19 |
20 | width
21 | Number width of an object
23 |
24 |
25 | height
26 | Number height of an object
28 |
29 |
30 |
31 | Required properties are in red
32 | `
33 | })
34 | export class DocSizeComponent {
35 | constructor() {}
36 | }
37 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docTextIconStyle.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'doc-text-icon-style',
5 | styles: [],
6 | template: `
7 |
8 | The literal describes style used by BMapLib.MarkerClusterer instance.
9 |
10 |
11 |
12 |
13 | Property
14 | Type
15 | Details
16 |
17 |
18 |
19 |
20 | url
21 | String Image url
23 |
24 |
25 | size
26 | Object See: Size
28 |
29 |
30 | anchor
31 | Object See: Size
33 |
34 |
35 | offset
36 | Object See: Size
38 |
39 |
40 | textSize
41 | Number Font size, 10 by default
43 |
44 |
45 | textColor
46 | String Font color. black by default
48 |
49 |
50 |
51 |
52 | Required properties are in red
53 | `
54 | })
55 | export class DocTextIconStyleComponent {
56 | constructor() {}
57 | }
58 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docTileLayer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | import {
4 | TileLayerOptions,
5 | MapOptions,
6 | BTileLayer,
7 | getTilesUrlFunc
8 | } from 'angular2-baidu-map'
9 |
10 | @Component({
11 | selector: 'doc-tilelayer',
12 | styles: [],
13 | template: `
14 |
15 | The tilelayer component is sub-component of
16 | baidu-map. It is used to add BMap.TileLayer to
17 | the map.
18 |
19 | Usage
20 |
21 |
22 | <baidu-map [options]="expression">
23 | <tilelayer [options]="expression" [getTilesUrl]="expression" (loaded)="expression"></tilelayer>
24 | </baidu-map>
25 |
26 |
Attributes
29 | Required properties are in red
30 |
31 |
32 |
33 |
34 | Param
35 | Type
36 | Details
37 |
38 |
39 |
40 |
41 | options
42 | expression
44 | Literal for constructing tilelayer. See
45 | TileLayerOptions
46 |
47 |
48 |
49 | getTilesUrl
50 | expression
52 | The implementation of getTilesUrl function. It should be a function
53 | with two parameters:
54 | Pixel , zoom
59 |
60 |
61 |
62 | loaded
63 | expression
65 | Expression to evaluate upon tilelayer load event. ($event
68 | object is available as
69 | BMap.TileLayer )
74 |
75 |
76 |
77 |
78 |
79 | Example
80 |
81 |
87 |
88 |
89 |
90 | <baidu-map [options]="opts">
91 | <tilelayer [options]="tilelayerOptions" [getTilesUrl]="getTilesUrl" (loaded)="tilelayerLoaded($event)"></tilelayer>
92 | </baidu-map>
93 |
94 |
98 |
99 | export class DemoComponent {
100 | public opts: MapOptions
101 | public tilelayerOptions: TileLayerOptions
102 | public getTilesUrl: getTilesUrlFunc
103 |
104 | constructor() {
105 | this.opts = {
106 | centerAndZoom: {
107 | lat: 40.007978,
108 | lng: 116.332782,
109 | zoom: 16
110 | }
111 | }
112 |
113 | this.tilelayerOptions = {
114 | transparentPng: true
115 | }
116 |
117 | this.getTilesUrl = function(tileCoord, zoom) {
118 | const { x, y } = tileCoord
119 | return \`https://lbsyun.baidu.com/jsdemo/demo/tiles/${zoom}/tile${x}_${y}.png\`
120 | }
121 |
122 |
123 | }
124 |
125 | public tilelayerLoaded(tilelayer: BTileLayer): void {
126 | console.log('tilelayer loaded', tilelayer)
127 | }
128 | }
129 |
130 |
The literal describes a BMap.TileLayer instance.
8 |
9 |
10 |
11 | Property
12 | Type
13 | Details
14 |
15 |
16 |
17 |
18 | transparentPng
19 | Boolean Define the used png if it is transparent or not
21 |
22 |
23 | tileUrlTemplate
24 | String
26 | Specify the tile template. If you don't provide this template URL,
27 | you must provide implementation of getTilesUrl to
28 | <tillayer/>
29 |
30 |
31 |
32 | copyright
33 | Copyright
35 | Copyright information, see
36 | Copyright
40 |
41 |
42 |
43 | zIndex
44 | Number Zindex of this tilelayer
46 |
47 |
48 |
49 |
50 | Required properties are in red
51 | `
52 | })
53 | export class DocTileLayerOptionsComponent {
54 | constructor() {}
55 | }
56 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/docTrafficLayer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | import {
4 | TrafficLayerOptions,
5 | MapOptions,
6 | BTrafficLayer
7 | } from 'angular2-baidu-map'
8 |
9 | @Component({
10 | selector: 'doc-trafficlayer',
11 | styles: [],
12 | template: `
13 |
14 | The trafficlayer component is sub-component of
15 | baidu-map. It is used to add
16 | BMap.TrafficLayer to the map.
17 |
18 | Usage
19 |
20 |
21 | <baidu-map [options]="expression">
22 | <trafficlayer [options]="expression" (loaded)="expression"></trafficlayer>
23 | </baidu-map>
24 |
25 |
Attributes
28 | Required properties are in red
29 |
30 |
31 |
32 |
33 | Param
34 | Type
35 | Details
36 |
37 |
38 |
39 |
40 | options
41 | expression
43 | Literal for constructing trafficlayer. See
44 | TrafficLayerOptions
45 |
46 |
47 |
48 | loaded
49 | expression
51 | Expression to evaluate upon trafficlayer load event. ($event
54 | object is available as
55 | BMap.TrafficLayer )
60 |
61 |
62 |
63 |
64 |
65 | Example
66 |
67 |
72 |
73 |
74 |
75 | <baidu-map [options]="opts">
76 | <trafficlayer [options]="trafficlayerOptions" (loaded)="trafficlayerLoaded($event)"></trafficlayer>
77 | </baidu-map>
78 |
79 |
83 |
84 | export class DemoComponent {
85 | public opts: MapOptions
86 | public trafficlayerOptions: TrafficLayerOptions
87 |
88 | constructor() {
89 | this.opts = {
90 | centerAndZoom: {
91 | lat: 39.915,
92 | lng: 116.404,
93 | zoom: 15
94 | }
95 | }
96 |
97 | this.trafficlayerOptions = {
98 | predictDate: {
99 | weekday: 3
100 | }
101 | }
102 |
103 | }
104 |
105 | public trafficlayerLoaded(trafficlayer: BTrafficLayer): void {
106 | console.log('trafficlayer loaded', trafficlayer)
107 | }
108 | }
109 |
110 |
8 | The literal describes a BMap.TrafficLayer instance.
9 |
10 |
11 |
12 |
13 | Property
14 | Type
15 | Details
16 |
17 |
18 |
19 |
20 | predictDate
21 | PredictDate See PredictDate
23 |
24 |
25 |
26 |
27 | Required properties are in red
28 | `
29 | })
30 | export class DocTrafficLayerOptionsComponent {
31 | constructor() {}
32 | }
33 |
--------------------------------------------------------------------------------
/demo/app/components/apidoc/index.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnDestroy, OnInit } from '@angular/core'
2 | import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'
3 |
4 | import { Subscription, Observable } from 'rxjs'
5 | import { filter } from 'rxjs/operators'
6 |
7 | @Component({
8 | selector: 'apidoc',
9 | styles: [
10 | `
11 | :host {
12 | width: 100%;
13 | display: flex;
14 | justify-content: center;
15 | }
16 |
17 | :host .container {
18 | width: 1200px;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | }
23 |
24 | :host .container .doc {
25 | display: flex;
26 | width: 100%;
27 | flex-grow: 2;
28 | }
29 |
30 | :host .container .doc api-sidebar {
31 | flex-shrink: 0;
32 | }
33 |
34 | .api-content {
35 | width: 989px;
36 | display: flex;
37 | flex-direction: column;
38 | border: 1px solid #cccccc;
39 | border-left: none;
40 | border-radius: 0 4px 4px 0;
41 | }
42 |
43 | .api-content .api-name {
44 | width: 100%;
45 | padding: 15px;
46 | border-bottom: 1px solid #cccccc;
47 | flex-shrink: 0;
48 | }
49 |
50 | .api-content .api-introduction {
51 | width: 100%;
52 | padding: 15px;
53 | }
54 |
55 | .api-content .api-introduction .title {
56 | margin: 5px 0 5px 0;
57 | }
58 |
59 | .api-content .api-introduction >>> baidu-map {
60 | width: 100%;
61 | height: 300px;
62 | display: block;
63 | margin: 10px 0 10px 0;
64 | }
65 |
66 | .api-content .api-introduction .line-text {
67 | word-break: break-word;
68 | }
69 |
70 | @media screen and (max-width: 1215px) {
71 | .api-content {
72 | width: 880px;
73 | }
74 | }
75 |
76 | @media screen and (max-width: 1115px) {
77 | .api-content {
78 | width: 800px;
79 | }
80 | }
81 |
82 | @media screen and (max-width: 1030px) {
83 | .api-content {
84 | width: 700px;
85 | }
86 | }
87 |
88 | @media screen and (max-width: 960px) {
89 | .api-content {
90 | border-left: 1px solid #cccccc;
91 | border-radius: 4px;
92 | width: 100%;
93 | }
94 | }
95 |
96 | @media screen and (max-width: 1200px) {
97 | :host .container {
98 | width: 100%;
99 | }
100 | }
101 | `
102 | ],
103 | template: `
104 |
105 |
API Documentation
106 |
107 |
108 |
109 |
110 |
111 |
{{ name }}
112 |
113 |
114 |
116 |
117 |
118 |
40 |
41 |
44 |
47 |
50 |
53 |
56 |
59 |
62 |
65 |
68 |
71 |
74 |
75 |
78 |
81 |
84 |
87 |
93 |
96 |
99 |
102 |
105 |
108 |
111 |
114 |
117 |
120 |
123 |
126 |
134 |
140 |
143 |
146 |
About
7 |
8 | angular2-baidu-map
9 | is a set of components written in TypeScript which integrate
10 | 百度地图 in an
11 | Angular applications.
12 |
13 |
14 | It is based on the
15 | 百度地图 Javascript
16 | API version 3.0, and
17 | Angular >=version 4.4.1
18 |
19 | `
20 | })
21 | export class AboutComponent {}
22 |
--------------------------------------------------------------------------------
/demo/app/components/home/contribute.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'contribute',
5 | template: `
6 | Contributing
7 |
8 | angular2-baidu-map is hosted on
9 | GitHub . If you find a bug, please use
12 | issue
17 | system to report it, or fork this repository, fix it and give a pull
18 | request. Contributions are more than welcome
19 |
20 | `
21 | })
22 | export class ContributeComponent {}
23 |
--------------------------------------------------------------------------------
/demo/app/components/home/github.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'github',
5 | template: `
6 |
7 |
14 |
21 |
22 | `
23 | })
24 | export class GithubComponent {}
25 |
--------------------------------------------------------------------------------
/demo/app/components/home/index.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | import { BMapInstance, MapOptions, Point } from 'angular2-baidu-map'
4 |
5 | @Component({
6 | styles: [
7 | `
8 | :host {
9 | width: 100%;
10 | display: flex;
11 | flex-direction: column;
12 | align-items: center;
13 | }
14 | baidu-map {
15 | width: 800px;
16 | height: 290px;
17 | display: block;
18 | }
19 | .home-desc {
20 | width: 800px;
21 | }
22 | @media screen and (max-width: 800px) {
23 | baidu-map,
24 | .home-desc {
25 | width: 100%;
26 | }
27 | }
28 | `
29 | ],
30 | template: `
31 | angular2-baidu-map
32 |
33 |
35 | Version
7 |
8 | There are 3 major versions available, and each of them is not backwards
9 | compatible. Version of angular2-baidu-map is consistent with
10 | angular. Below are documentation references for previous versions:
11 |
12 | HOME
2 | QUICK START
3 | API DOCUMENTATION
4 |
--------------------------------------------------------------------------------
/demo/app/components/menu/index.styl:
--------------------------------------------------------------------------------
1 | :host
2 | width: 100%;
3 | height: 50px;
4 | display: flex;
5 | justify-content: center;
6 |
7 | a
8 | color: #7f8c8d;
9 | cursor: pointer;
10 | text-decoration: none;
11 | padding: 15px;
12 |
13 | a.active
14 | color: #424242;
15 |
16 | a:hover
17 | border-bottom: 3px solid #dd1b16;
18 |
19 | @media screen and (max-width: 800px)
20 | a
21 | padding: 15px 5px 15px 5px;
--------------------------------------------------------------------------------
/demo/app/components/menu/index.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'menu',
5 | templateUrl: './index.html',
6 | styleUrls: ['./index.styl']
7 | })
8 | export class MenuComponent {}
9 |
--------------------------------------------------------------------------------
/demo/app/components/quickstart/import.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'import',
5 | template: `
6 | Import
7 |
17 | `
18 | })
19 | export class ImportComponent {}
20 |
--------------------------------------------------------------------------------
/demo/app/components/quickstart/index.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'quickstart',
5 | styles: [
6 | `
7 | :host {
8 | width: 100%;
9 | display: flex;
10 | flex-direction: column;
11 | align-items: center;
12 | }
13 | baidu-map {
14 | width: 800px;
15 | height: 290px;
16 | }
17 | .home-desc {
18 | width: 800px;
19 | }
20 | @media screen and (max-width: 800px) {
21 | baidu-map,
22 | .home-desc {
23 | width: 100%;
24 | }
25 | }
26 | `
27 | ],
28 | template: `
29 |
30 |
Quickstart
31 |
32 | To start using angular2-baidu-map, follow these simple
33 | steps for module setup. Afterwards, read
34 | API documentation to learn about advanced usage.
35 |
36 |
37 |
38 |
39 |
Install
7 |
17 | `
18 | })
19 | export class InstallComponent {}
20 |
--------------------------------------------------------------------------------
/demo/app/components/quickstart/route.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core'
2 | import { RouterModule, Routes } from '@angular/router'
3 |
4 | import { QuickstartComponent } from '@/app/components/quickstart/index.component'
5 |
6 | const routes: Routes = [
7 | {
8 | component: QuickstartComponent,
9 | path: 'quickstart'
10 | }
11 | ]
12 |
13 | @NgModule({
14 | exports: [RouterModule],
15 | imports: [RouterModule.forChild(routes)]
16 | })
17 | export class QuickstartRouteModule {}
18 |
--------------------------------------------------------------------------------
/demo/app/components/quickstart/usage.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'usage',
5 | template: `
6 | Usage
7 |
70 | `
71 | })
72 | export class UsageComponent {}
73 |
--------------------------------------------------------------------------------
/demo/app/d.component.html:
--------------------------------------------------------------------------------
1 |
10 |
12 |
--------------------------------------------------------------------------------
/demo/app/d.component.styl:
--------------------------------------------------------------------------------
1 | :host
2 | width: 100%;
3 | display: flex;
4 | flex-direction: column;
5 | background-color: #fafafa;
6 |
7 | .page-content
8 | width: 100%;
9 | display: flex;
10 | flex-grow: 5;
11 | padding: 30px 10px 10px 10px;
12 |
--------------------------------------------------------------------------------
/demo/app/d.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'root',
5 | templateUrl: './d.component.html',
6 | styleUrls: ['./d.component.styl']
7 | })
8 | export class DComponent {}
9 |
--------------------------------------------------------------------------------
/demo/app/d.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core'
2 | import { BrowserModule } from '@angular/platform-browser'
3 |
4 | import { DRouteModule } from '@/app/d.routing.module'
5 |
6 | import { MenuComponent } from '@/app/components/menu'
7 | import { DComponent } from '@/app/d.component'
8 |
9 | import { ApidocModule } from '@/app/components/apidoc/index.module'
10 | import { HomeModule } from '@/app/components/home/index.module'
11 | import { QuickstartModule } from '@/app/components/quickstart/index.module'
12 |
13 | @NgModule({
14 | bootstrap: [DComponent],
15 | declarations: [DComponent, MenuComponent],
16 | imports: [
17 | BrowserModule,
18 | DRouteModule,
19 | HomeModule,
20 | QuickstartModule,
21 | ApidocModule
22 | ]
23 | })
24 | export class DModule {}
25 |
--------------------------------------------------------------------------------
/demo/app/d.routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core'
2 | import { RouterModule, Routes } from '@angular/router'
3 |
4 | const routes: Routes = [
5 | {
6 | path: '',
7 | pathMatch: 'full',
8 | redirectTo: '/home'
9 | }
10 | ]
11 |
12 | @NgModule({
13 | exports: [RouterModule],
14 | imports: [
15 | RouterModule.forRoot(
16 | routes,
17 | { enableTracing: false, useHash: true } // <-- debugging purposes only
18 | )
19 | ]
20 | })
21 | export class DRouteModule {}
22 |
--------------------------------------------------------------------------------
/demo/app/shared/highlight.ts:
--------------------------------------------------------------------------------
1 | import { Directive, ElementRef, AfterViewInit } from '@angular/core'
2 | import hljs from 'highlight.js'
3 |
4 | @Directive({
5 | selector: '[highlight]'
6 | })
7 | export class HighlightDirective implements AfterViewInit {
8 | constructor(private el: ElementRef) {}
9 |
10 | public ngAfterViewInit() {
11 | const snippets = this.el.nativeElement
12 | .querySelectorAll('.snippet pre code')
13 | .forEach((s: any) => {
14 | hljs.highlightBlock(s)
15 | })
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/demo/app/shared/index.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core'
2 |
3 | import { HighlightDirective } from '@/app/shared/highlight'
4 |
5 | @NgModule({
6 | declarations: [HighlightDirective],
7 | exports: [HighlightDirective]
8 | })
9 | export class SharedModule {}
10 |
--------------------------------------------------------------------------------
/demo/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leftstick/angular2-baidu-map/2a6abfd36f556a5ff3e1e12d8bfeaed60c168e15/demo/assets/.gitkeep
--------------------------------------------------------------------------------
/demo/assets/markericon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leftstick/angular2-baidu-map/2a6abfd36f556a5ff3e1e12d8bfeaed60c168e15/demo/assets/markericon.png
--------------------------------------------------------------------------------
/demo/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | baseUrl: '/angular2-baidu-map/',
3 | production: true
4 | }
5 |
--------------------------------------------------------------------------------
/demo/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | baseUrl: '/',
7 | production: false
8 | }
9 |
10 | /*
11 | * For easier debugging in development mode, you can import the following file
12 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
13 | *
14 | * This import should be commented out in production mode because it will have a negative impact
15 | * on performance if an error is thrown.
16 | */
17 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
18 |
--------------------------------------------------------------------------------
/demo/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leftstick/angular2-baidu-map/2a6abfd36f556a5ff3e1e12d8bfeaed60c168e15/demo/favicon.ico
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | angular2-baidu-map
6 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/demo/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core'
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
3 |
4 | import { DModule } from '@/app/d.module'
5 |
6 | import { environment } from '@/environments/environment'
7 |
8 | if (environment.production) {
9 | enableProdMode()
10 | }
11 |
12 | platformBrowserDynamic()
13 | .bootstrapModule(DModule)
14 | .catch(err => console.log(err))
15 |
16 | document.head.removeChild(document.querySelector('#splash-spinner'))
17 | document.body.removeChild(document.querySelector('.spinner'))
18 |
--------------------------------------------------------------------------------
/demo/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
23 |
24 | /**
25 | * Web Animations `@angular/platform-browser/animations`
26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 | */
29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
30 |
31 | /**
32 | * By default, zone.js will patch all possible macroTask and DomEvents
33 | * user can disable parts of macroTask/DomEvents patch by setting following flags
34 | * because those flags need to be set before `zone.js` being loaded, and webpack
35 | * will put import in the top of bundle, so user need to create a separate file
36 | * in this directory (for example: zone-flags.ts), and put the following flags
37 | * into that file, and then add the following code before importing zone.js.
38 | * import './zone-flags.ts';
39 | *
40 | * The flags allowed in zone-flags.ts are listed here.
41 | *
42 | * The following flags will work for all browsers.
43 | *
44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 | *
48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
50 | *
51 | * (window as any).__Zone_enable_cross_context_check = true;
52 | *
53 | */
54 |
55 | /***************************************************************************************************
56 | * Zone JS is required by default for Angular itself.
57 | */
58 | import 'zone.js/dist/zone'; // Included with Angular CLI.
59 |
60 |
61 | /***************************************************************************************************
62 | * APPLICATION IMPORTS
63 | */
64 |
--------------------------------------------------------------------------------
/demo/route.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core'
2 | import { RouterModule, Routes } from '@angular/router'
3 |
4 | const routes: Routes = [
5 | {
6 | path: '',
7 | pathMatch: 'full',
8 | redirectTo: '/home'
9 | }
10 | ]
11 |
12 | @NgModule({
13 | exports: [RouterModule],
14 | imports: [
15 | RouterModule.forRoot(
16 | routes,
17 | { enableTracing: false, useHash: true } // <-- debugging purposes only
18 | )
19 | ]
20 | })
21 | export class RouteModule {}
22 |
--------------------------------------------------------------------------------
/demo/styles.styl:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | code
3 | font-style: italic;
4 | font-weight: bold;
5 | color: gray;
6 |
7 | p
8 | line-height: 25px;
9 | margin-top: 3px;
10 | font-family: 'Noto Sans', 'PT Sans', 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
11 |
12 | .page-title
13 | text-align: center;
14 | margin-bottom: 15px;
15 |
16 | .section
17 | display: block;
18 | margin-bottom: 20px;
19 |
20 | .section h1
21 | margin-bottom: 10px;
22 |
23 | .snippet
24 | padding: 10px;
25 | background-color: #f5f5f5;
26 | border: 1px solid #cccccc;
27 |
28 | .snippet code
29 | font-style: normal;
30 | font-weight: normal;
31 | color: #fff;
32 |
33 | blockquote
34 | margin: 10px 0 10px 0;
35 | border-left: 5px solid gray;
36 | padding-left: 10px;
37 |
38 | .matrix
39 | width: 100%;
40 | border-collapse: collapse;
41 | margin: 10px 0 10px 0;
42 |
43 | .matrix td, .matrix th
44 | border: 1px solid #98bf21;
45 | padding: 3px 7px 2px 7px;
46 |
47 | .matrix th
48 | text-align: left;
49 | padding-top: 5px;
50 | padding-bottom: 4px;
51 | background-color: #a7c942;
52 | color: #ffffff;
53 |
54 | .matrix tbody > tr
55 | line-height: 25px;
56 |
57 | .matrix .label
58 | display: inline-block;
59 | padding-left: 5px;
60 | padding-right: 5px;
61 | border-radius: 2px;
62 | background-color: #5bc0de;
63 | color: #fff;
64 | line-height: normal;
65 |
66 | .matrix .label.required
67 | background-color: #f04124;
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular2-baidu-map",
3 | "version": "8.0.1",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "demo": "ng build demo --prod && gh-pages -d demodist/",
9 | "lint": "ng lint"
10 | },
11 | "dependencies": {
12 | "@angular/animations": "~8.2.14",
13 | "@angular/common": "~8.2.14",
14 | "@angular/compiler": "~8.2.14",
15 | "@angular/core": "~8.2.14",
16 | "@angular/forms": "~8.2.14",
17 | "@angular/platform-browser": "~8.2.14",
18 | "@angular/platform-browser-dynamic": "~8.2.14",
19 | "@angular/router": "~8.2.14",
20 | "@types/highlight.js": "^9.12.4",
21 | "gh-pages": "^3.0.0",
22 | "rxjs": "~6.5.5",
23 | "tslib": "^1.13.0",
24 | "zone.js": "~0.9.1"
25 | },
26 | "devDependencies": {
27 | "@angular-devkit/build-angular": "~0.803.26",
28 | "@angular-devkit/build-ng-packagr": "~0.803.26",
29 | "@angular/cli": "~8.3.26",
30 | "@angular/compiler-cli": "~8.2.14",
31 | "@angular/language-service": "~8.2.14",
32 | "@types/node": "~14.0.11",
33 | "codelyzer": "^5.2.2",
34 | "highlight.js": "^10.0.3",
35 | "ng-packagr": "^5.7.1",
36 | "ts-node": "~8.10.2",
37 | "tsickle": "^0.38.1",
38 | "tslint": "~6.1.2",
39 | "typescript": "~3.5.3"
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/projects/lib/README.md:
--------------------------------------------------------------------------------
1 | # angular2-baidu-map
2 |
3 | [![NPM version][npm-image]][npm-url]
4 | ![][david-url]
5 | ![][dt-url]
6 | ![][license-url]
7 |
8 | Baidu-Map module for Angular8
9 |
10 | Read full documentation here: [documentation](https://leftstick.github.io/angular2-baidu-map/)
11 |
12 | Read code example here: [example](https://github.com/leftstick/angular8-baidu-map-example)
13 |
14 | > Be aware that it is a totally rewrite version, therefore, backward compatibility is not considered
15 |
16 | * If you are using the previous version `3.x`, [read it here](https://github.com/leftstick/angular2-baidu-map/tree/3.x)
17 | * If you are using the previous version `4.x`, [read it here](https://github.com/leftstick/angular2-baidu-map/tree/4.x)
18 |
19 | ## Getting started
20 |
21 | ```bash
22 | npm install angular2-baidu-map
23 | ```
24 |
25 | ## Usage
26 |
27 | **app.module.ts**
28 |
29 | ```typescript
30 | import { BrowserModule } from '@angular/platform-browser'
31 | import { NgModule } from '@angular/core'
32 |
33 | import { AppComponent } from './app.component'
34 |
35 | import { BaiduMapModule } from 'angular2-baidu-map'
36 |
37 | @NgModule({
38 | declarations: [AppComponent],
39 | imports: [BrowserModule, BaiduMapModule.forRoot({ ak: 'your ak' })],
40 | providers: [],
41 | bootstrap: [AppComponent]
42 | })
43 | export class AppModule {}
44 | ```
45 |
46 | **app.component.ts**
47 |
48 | ```typescript
49 | import { Component } from '@angular/core'
50 |
51 | import { MapOptions } from 'angular2-baidu-map'
52 |
53 | @Component({
54 | selector: 'app-root',
55 | templateUrl: './app.component.html',
56 | styleUrls: []
57 | })
58 | export class AppComponent {
59 | options: MapOptions
60 |
61 | constructor() {
62 | this.options = {
63 | centerAndZoom: {
64 | lat: 39.920116,
65 | lng: 116.403703,
66 | zoom: 16
67 | },
68 | enableKeyboard: true
69 | }
70 | }
71 | }
72 | ```
73 |
74 | **app.component.html**
75 |
76 | ```html
77 | ')
35 | nullCheck(this.radius, 'center is required for ')
36 |
37 | this.service
38 | .addOverlay(() => {
39 | return (this.circle = new window.BMap.Circle(
40 | toPoint(this.center),
41 | this.radius,
42 | this.options
43 | ))
44 | })
45 | .then(() => {
46 | this.loaded.emit(this.circle)
47 | })
48 | }
49 |
50 | public ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
51 | if (changes.center && !changes.center.isFirstChange()) {
52 | this.circle.setCenter(toPoint(changes.center.currentValue))
53 | }
54 | if (changes.radius && !changes.radius.isFirstChange()) {
55 | this.circle.setRadius(changes.radius.currentValue)
56 | }
57 | if (changes.options && !changes.options.isFirstChange()) {
58 | this.setOptions(changes.options.currentValue)
59 | }
60 | }
61 |
62 | public ngOnDestroy() {
63 | this.service.removeOverlay(this.circle)
64 | }
65 |
66 | private setOptions(options: CircleOptions): void {
67 | if (isNull(options)) {
68 | return
69 | }
70 | if (!isUndefined(options.enableEditing)) {
71 | if (options.enableEditing) {
72 | this.circle.enableEditing()
73 | } else {
74 | this.circle.disableEditing()
75 | }
76 | }
77 | if (!isUndefined(options.enableMassClear)) {
78 | if (options.enableEditing) {
79 | this.circle.enableMassClear()
80 | } else {
81 | this.circle.disableMassClear()
82 | }
83 | }
84 | if (!isUndefined(options.strokeColor)) {
85 | this.circle.setStrokeColor(options.strokeColor)
86 | }
87 | if (!isUndefined(options.fillColor)) {
88 | this.circle.setFillColor(options.fillColor)
89 | }
90 | if (!isUndefined(options.strokeOpacity)) {
91 | this.circle.setStrokeOpacity(options.strokeOpacity)
92 | }
93 | if (!isUndefined(options.fillOpacity)) {
94 | this.circle.setFillOpacity(options.fillOpacity)
95 | }
96 | if (!isUndefined(options.strokeStyle)) {
97 | this.circle.setStrokeStyle(options.strokeStyle)
98 | }
99 | if (!isUndefined(options.strokeWeight)) {
100 | this.circle.setStrokeWeight(options.strokeWeight)
101 | }
102 | }
103 | }
104 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/components/control.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Directive,
3 | EventEmitter,
4 | Input,
5 | Output,
6 | OnDestroy,
7 | OnInit
8 | } from '@angular/core'
9 |
10 | import {
11 | toGeolocationOptions,
12 | toMapTypeControlOptions,
13 | toNavigationControlOptions,
14 | toOverviewMapControlOptions,
15 | toScaleControlOptions
16 | } from '../helpers/transformer'
17 | import { nullCheck } from '../helpers/validate'
18 | import { MapService } from '../providers/mapService'
19 | import { BControl, ControlType } from '../types/Control'
20 |
21 | @Directive({
22 | selector: 'control'
23 | })
24 | export class ControlComponent implements OnInit, OnDestroy {
25 | @Input() private type: ControlType
26 | @Input() private options: { [key: string]: any }
27 |
28 | @Output() private loaded = new EventEmitter()
29 |
30 | private control: BControl
31 |
32 | constructor(private service: MapService) {}
33 |
34 | public ngOnInit() {
35 | nullCheck(this.type, 'type is required for ')
36 |
37 | this.service
38 | .addControl(() => {
39 | this.control = this.createControl(this.type, this.options)
40 | return this.control
41 | })
42 | .then(({ control }) => {
43 | this.loaded.emit(control)
44 | })
45 | }
46 |
47 | public ngOnDestroy() {
48 | this.service.removeControl(this.control)
49 | }
50 |
51 | private createControl(
52 | type: ControlType,
53 | options: { [key: string]: any }
54 | ): BControl {
55 | if (type === 'navigation') {
56 | return new window.BMap.NavigationControl(
57 | toNavigationControlOptions(options)
58 | )
59 | }
60 | if (type === 'overviewmap') {
61 | return new window.BMap.OverviewMapControl(
62 | toOverviewMapControlOptions(options)
63 | )
64 | }
65 | if (type === 'scale') {
66 | return new window.BMap.ScaleControl(toScaleControlOptions(options))
67 | }
68 | if (type === 'maptype') {
69 | return new window.BMap.MapTypeControl(toMapTypeControlOptions(options))
70 | }
71 | if (type === 'geolocation') {
72 | return new window.BMap.GeolocationControl(toGeolocationOptions(options))
73 | }
74 | if (type === 'panorama') {
75 | return new window.BMap.PanoramaControl()
76 | }
77 | throw new Error(`Unsupported type:${type} of control`)
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/components/heatmap.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Directive,
3 | EventEmitter,
4 | Input,
5 | OnChanges,
6 | OnDestroy,
7 | OnInit,
8 | Output,
9 | SimpleChange
10 | } from '@angular/core'
11 |
12 | import { nullCheck } from '../helpers/validate'
13 | import { MapService } from '../providers/mapService'
14 | import { BHeatmap, HeatmapOptions, HeatmapData } from '../types/Heatmap'
15 | import { ScriptLoader } from '../providers/scriptLoader'
16 |
17 | const LIB_URL = `https://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js`
18 |
19 | @Directive({
20 | selector: 'heatmap'
21 | })
22 | export class HeatmapComponent implements OnInit, OnChanges, OnDestroy {
23 | @Input() private dataset: HeatmapData
24 | @Input() private options: HeatmapOptions
25 |
26 | @Output() private loaded = new EventEmitter()
27 |
28 | private heatmap: BHeatmap
29 |
30 | constructor(
31 | private service: MapService,
32 | private scriptLoader: ScriptLoader
33 | ) {}
34 |
35 | public ngOnInit() {
36 | nullCheck(this.dataset, 'dataset is required for ')
37 |
38 | this.service.getNativeMap().then(() => {
39 | return this.scriptLoader.load(LIB_URL, false, () => {
40 | this.service
41 | .addOverlay(() => {
42 | return (this.heatmap = new window.BMapLib.HeatmapOverlay(
43 | this.options
44 | ))
45 | })
46 | .then(() => {
47 | this.loaded.emit(this.heatmap)
48 | if (this.dataset) {
49 | this.heatmap.setDataSet(this.dataset)
50 | }
51 | })
52 | })
53 | })
54 | }
55 |
56 | public ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
57 | if (changes.dataset && !changes.dataset.isFirstChange()) {
58 | this.heatmap.setDataSet(changes.dataset.currentValue)
59 | }
60 | if (changes.options && !changes.options.isFirstChange()) {
61 | this.heatmap.setOptions(changes.options.currentValue)
62 | }
63 | }
64 |
65 | public ngOnDestroy() {
66 | this.service.removeOverlay(this.heatmap)
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/components/map.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Component,
3 | ElementRef,
4 | EventEmitter,
5 | Input,
6 | OnChanges,
7 | OnInit,
8 | OnDestroy,
9 | AfterViewInit,
10 | Output,
11 | SimpleChange,
12 | ViewChild
13 | } from '@angular/core'
14 |
15 | import { MapService } from '../providers/mapService'
16 | import { BMapInstance, MapOptions } from '../types/Map'
17 |
18 | import { nullCheck } from '../helpers/validate'
19 |
20 | @Component({
21 | providers: [MapService],
22 | selector: 'baidu-map',
23 | styles: [
24 | `
25 | .baidu-map-instance {
26 | width: 100%;
27 | height: 100%;
28 | display: none;
29 | }
30 | .baidu-map-offline {
31 | width: 100%;
32 | height: 100%;
33 | background-color: #e6e6e6;
34 | position: relative;
35 | display: none;
36 | }
37 | .baidu-map-offline label {
38 | fontsize: 30px;
39 | margin: 0;
40 | position: absolute;
41 | top: 50%;
42 | left: 50%;
43 | margin-right: -50%;
44 | transform: translate(-50%, -50%);
45 | }
46 | .tranclude-content {
47 | display: none;
48 | }
49 | `
50 | ],
51 | template: `
52 |
53 |
54 | {{ 'NO_NETWORK' }}
55 |
56 |
57 |
59 | `
60 | })
61 | export class MapComponent
62 | implements OnInit, AfterViewInit, OnDestroy, OnChanges {
63 | @Input() private options: MapOptions
64 |
65 | @Output() private loaded = new EventEmitter()
66 | @Output() private clicked = new EventEmitter()
67 |
68 | @ViewChild('mapinstance', { static: false }) private mapInstance: ElementRef
69 |
70 | constructor(private service: MapService) {}
71 |
72 | ngOnInit(): void {
73 | // do nothing
74 | }
75 |
76 | public ngAfterViewInit() {
77 | nullCheck(this.options, 'options is required for ')
78 | nullCheck(
79 | this.options.centerAndZoom,
80 | 'options.centerAndZoom is required for '
81 | )
82 |
83 | this.service
84 | .createMap(this.mapInstance.nativeElement, this.options)
85 | .then(map => {
86 | this.loaded.emit(map)
87 | return map
88 | })
89 | .then(map => {
90 | this.addListener(map)
91 | })
92 | }
93 |
94 | public ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
95 | const opts = changes.options.currentValue as MapOptions
96 | if (!opts) {
97 | return console.warn(
98 | 'MapOptions change was ignored since you are passing empty value'
99 | )
100 | }
101 | this.service.setOptions(opts)
102 | }
103 |
104 | public ngOnDestroy() {
105 | console.log('on map destroy')
106 | }
107 |
108 | private addListener(map: BMapInstance) {
109 | map.addEventListener('click', (e: any) => {
110 | this.clicked.emit(e)
111 | })
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/components/marker.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Directive,
3 | EventEmitter,
4 | Input,
5 | OnChanges,
6 | OnDestroy,
7 | OnInit,
8 | Output,
9 | SimpleChange
10 | } from '@angular/core'
11 |
12 | import { isNull } from '../helpers/object'
13 | import {
14 | toIcon,
15 | toMarkerOptions,
16 | toPoint,
17 | toSize
18 | } from '../helpers/transformer'
19 | import { nullCheck } from '../helpers/validate'
20 | import { MapService } from '../providers/mapService'
21 | import { BMapInstance } from '../types/Map'
22 | import { BMarker, MarkerOptions } from '../types/Marker'
23 | import { Point } from '../types/Point'
24 |
25 | @Directive({
26 | selector: 'marker'
27 | })
28 | export class MarkerComponent implements OnInit, OnChanges, OnDestroy {
29 | @Input() private point: Point
30 | @Input() private options: MarkerOptions
31 |
32 | @Output() private loaded = new EventEmitter()
33 | @Output() private clicked = new EventEmitter()
34 |
35 | private marker: BMarker
36 |
37 | constructor(private service: MapService) {}
38 |
39 | public ngOnInit() {
40 | nullCheck(this.point, 'point is required for ')
41 |
42 | this.service
43 | .addOverlay(() => {
44 | return (this.marker = new window.BMap.Marker(
45 | toPoint(this.point),
46 | toMarkerOptions(this.options)
47 | ))
48 | })
49 | .then(({ map }) => {
50 | this.loaded.emit(this.marker)
51 | this.addListener(this.marker, map)
52 | })
53 | .then(() => {
54 | // workaround: it's weird that postion is set while constructing phase will make click event not working
55 | this.marker.setPosition(
56 | new window.BMap.Point(this.point.lng, this.point.lat)
57 | )
58 | })
59 | }
60 |
61 | public ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
62 | if (changes.point && !changes.point.isFirstChange()) {
63 | this.marker.setPosition(toPoint(changes.point.currentValue))
64 | }
65 | if (changes.options && !changes.options.isFirstChange()) {
66 | this.setOptions(changes.options.currentValue)
67 | }
68 | }
69 |
70 | public ngOnDestroy() {
71 | this.service.removeOverlay(this.marker)
72 | }
73 |
74 | private setOptions(options: MarkerOptions): void {
75 | if (isNull(options)) {
76 | return
77 | }
78 | if (!isNull(options.offset)) {
79 | this.marker.setOffset(toSize(options.offset))
80 | }
81 | if (!isNull(options.icon)) {
82 | this.marker.setIcon(
83 | toIcon(options.icon.imageUrl, options.icon.size, options.icon)
84 | )
85 | }
86 | if (!isNull(options.enableMassClear)) {
87 | this.marker[
88 | (options.enableMassClear ? 'enable' : 'disable') + 'MassClear'
89 | ]()
90 | }
91 | if (!isNull(options.enableDragging)) {
92 | this.marker[
93 | (options.enableDragging ? 'enable' : 'disable') + 'Dragging'
94 | ]()
95 | }
96 | if (!isNull(options.rotation)) {
97 | this.marker.setRotation(options.rotation)
98 | }
99 | if (!isNull(options.shadow)) {
100 | this.marker.setShadow(
101 | toIcon(options.shadow.imageUrl, options.shadow.size, options.shadow)
102 | )
103 | }
104 | if (!isNull(options.title)) {
105 | this.marker.setTitle(options.title)
106 | }
107 | }
108 |
109 | private addListener(marker: BMarker, map: BMapInstance) {
110 | marker.addEventListener('click', (e: any) => {
111 | this.clicked.emit({
112 | e,
113 | map,
114 | marker
115 | })
116 | })
117 | }
118 | }
119 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/components/markerClusterer.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Directive,
3 | EventEmitter,
4 | Input,
5 | OnChanges,
6 | OnDestroy,
7 | OnInit,
8 | Output,
9 | SimpleChange
10 | } from '@angular/core'
11 |
12 | import { nullCheck } from '../helpers/validate'
13 | import { isUndefined } from '../helpers/object'
14 | import {
15 | toMarkerClustererOptions,
16 | toPoint,
17 | toMarkerOptions,
18 | toTextIconStyle
19 | } from '../helpers/transformer'
20 | import { MapService } from '../providers/mapService'
21 | import {
22 | MarkerClustererOptions,
23 | BMarkerClusterer
24 | } from '../types/MarkerClusterer'
25 | import { ScriptLoader } from '../providers/scriptLoader'
26 | import { BMapInstance } from '../types/Map'
27 |
28 | const LIB_URLS = {
29 | key: 'markerClusterer',
30 | scripts: [
31 | 'https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js',
32 | 'https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js'
33 | ]
34 | }
35 |
36 | @Directive({
37 | selector: 'marker-clusterer'
38 | })
39 | export class MarkerClustererComponent implements OnInit, OnChanges, OnDestroy {
40 | @Input() private options: MarkerClustererOptions
41 |
42 | @Output() private loaded = new EventEmitter()
43 |
44 | private markerClusterer: BMarkerClusterer
45 |
46 | constructor(
47 | private service: MapService,
48 | private scriptLoader: ScriptLoader
49 | ) {}
50 |
51 | public ngOnInit() {
52 | nullCheck(this.options, 'options is required for ')
53 |
54 | this.service.getNativeMap().then((map: BMapInstance) => {
55 | return this.scriptLoader.load(LIB_URLS, false, () => {
56 | this.markerClusterer = new window.BMapLib.MarkerClusterer(
57 | map,
58 | toMarkerClustererOptions(this.options)
59 | )
60 |
61 | this.loaded.emit(this.markerClusterer)
62 | })
63 | })
64 | }
65 |
66 | public ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
67 | if (changes.options && !changes.options.isFirstChange()) {
68 | this.resetOptions(changes.options.currentValue)
69 | }
70 | }
71 |
72 | private resetOptions(options: MarkerClustererOptions) {
73 | if (options.markers) {
74 | this.markerClusterer.clearMarkers()
75 | this.markerClusterer.addMarkers(
76 | options.markers.map(
77 | m =>
78 | new window.BMap.Marker(toPoint(m.point), toMarkerOptions(m.options))
79 | )
80 | )
81 | }
82 | if (!isUndefined(options.girdSize)) {
83 | this.markerClusterer.setGridSize(options.girdSize)
84 | }
85 | if (!isUndefined(options.maxZoom)) {
86 | this.markerClusterer.setMaxZoom(options.maxZoom)
87 | }
88 | if (options.styles) {
89 | this.markerClusterer.setStyles(
90 | options.styles.filter(s => s).map(s => toTextIconStyle(s))
91 | )
92 | }
93 | }
94 |
95 | public ngOnDestroy() {
96 | this.markerClusterer.clearMarkers()
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/components/polygon.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Directive,
3 | EventEmitter,
4 | Input,
5 | OnChanges,
6 | OnDestroy,
7 | OnInit,
8 | Output,
9 | SimpleChange
10 | } from '@angular/core'
11 |
12 | import { isNull, isUndefined } from '../helpers/object'
13 | import { toPoints } from '../helpers/transformer'
14 | import { nullCheck } from '../helpers/validate'
15 | import { MapService } from '../providers/mapService'
16 | import { BPolygon, PolygonOptions } from '../types/Polygon'
17 | import { Point } from '../types/Point'
18 |
19 | @Directive({
20 | selector: 'polygon'
21 | })
22 | export class PolygonComponent implements OnInit, OnChanges, OnDestroy {
23 | @Input() private points: Array
24 | @Input() private options: PolygonOptions
25 |
26 | @Output() private loaded = new EventEmitter()
27 |
28 | private polygon: BPolygon
29 |
30 | constructor(private service: MapService) {}
31 |
32 | public ngOnInit() {
33 | nullCheck(this.points, 'points is required for ')
34 |
35 | this.service
36 | .addOverlay(() => {
37 | return (this.polygon = new window.BMap.Polygon(
38 | toPoints(this.points),
39 | this.options
40 | ))
41 | })
42 | .then(() => {
43 | this.loaded.emit(this.polygon)
44 | })
45 | }
46 |
47 | public ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
48 | if (changes.points && !changes.points.isFirstChange()) {
49 | this.polygon.setPath(toPoints(changes.points.currentValue))
50 | }
51 | if (changes.options && !changes.options.isFirstChange()) {
52 | this.setOptions(changes.options.currentValue)
53 | }
54 | }
55 |
56 | public ngOnDestroy() {
57 | this.service.removeOverlay(this.polygon)
58 | }
59 |
60 | private setOptions(options: PolygonOptions): void {
61 | if (isNull(options)) {
62 | return
63 | }
64 | if (!isUndefined(options.enableEditing)) {
65 | if (options.enableEditing) {
66 | this.polygon.enableEditing()
67 | } else {
68 | this.polygon.disableEditing()
69 | }
70 | }
71 | if (!isUndefined(options.enableMassClear)) {
72 | if (options.enableEditing) {
73 | this.polygon.enableMassClear()
74 | } else {
75 | this.polygon.disableMassClear()
76 | }
77 | }
78 | if (!isUndefined(options.strokeColor)) {
79 | this.polygon.setStrokeColor(options.strokeColor)
80 | }
81 | if (!isUndefined(options.fillColor)) {
82 | this.polygon.setFillColor(options.fillColor)
83 | }
84 | if (!isUndefined(options.strokeOpacity)) {
85 | this.polygon.setStrokeOpacity(options.strokeOpacity)
86 | }
87 | if (!isUndefined(options.fillOpacity)) {
88 | this.polygon.setFillOpacity(options.fillOpacity)
89 | }
90 | if (!isUndefined(options.strokeStyle)) {
91 | this.polygon.setStrokeStyle(options.strokeStyle)
92 | }
93 | if (!isUndefined(options.strokeWeight)) {
94 | this.polygon.setStrokeWeight(options.strokeWeight)
95 | }
96 | }
97 | }
98 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/components/polyline.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Directive,
3 | EventEmitter,
4 | Input,
5 | OnChanges,
6 | OnDestroy,
7 | OnInit,
8 | Output,
9 | SimpleChange
10 | } from '@angular/core'
11 |
12 | import { isNull, isUndefined } from '../helpers/object'
13 | import { toPoints } from '../helpers/transformer'
14 | import { nullCheck } from '../helpers/validate'
15 | import { MapService } from '../providers/mapService'
16 | import { BMapInstance } from '../types/Map'
17 | import { BPolyline, PolylineOptions } from '../types/Polyline'
18 | import { Point } from '../types/Point'
19 |
20 | @Directive({
21 | selector: 'polyline'
22 | })
23 | export class PolylineComponent implements OnInit, OnChanges, OnDestroy {
24 | @Input() private points: Array
25 | @Input() private options: PolylineOptions
26 |
27 | @Output() private loaded = new EventEmitter()
28 | @Output() private clicked = new EventEmitter()
29 |
30 | private polyline: BPolyline
31 |
32 | constructor(private service: MapService) {}
33 |
34 | public ngOnInit() {
35 | nullCheck(this.points, 'points is required for ')
36 |
37 | this.service
38 | .addOverlay(() => {
39 | return (this.polyline = new window.BMap.Polyline(
40 | toPoints(this.points),
41 | this.options
42 | ))
43 | })
44 | .then(({ map }) => {
45 | this.loaded.emit(this.polyline)
46 | this.addListener(this.polyline, map)
47 | })
48 | }
49 |
50 | public ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
51 | if (changes.points && !changes.points.isFirstChange()) {
52 | this.polyline.setPath(toPoints(changes.points.currentValue))
53 | }
54 | if (changes.options && !changes.options.isFirstChange()) {
55 | this.setOptions(changes.options.currentValue)
56 | }
57 | }
58 |
59 | public ngOnDestroy() {
60 | this.service.removeOverlay(this.polyline)
61 | }
62 |
63 | private setOptions(options: PolylineOptions): void {
64 | if (isNull(options)) {
65 | return
66 | }
67 | if (!isUndefined(options.enableEditing)) {
68 | if (options.enableEditing) {
69 | this.polyline.enableEditing()
70 | } else {
71 | this.polyline.disableEditing()
72 | }
73 | }
74 | if (!isUndefined(options.enableMassClear)) {
75 | if (options.enableEditing) {
76 | this.polyline.enableMassClear()
77 | } else {
78 | this.polyline.disableMassClear()
79 | }
80 | }
81 | if (!isUndefined(options.strokeColor)) {
82 | this.polyline.setStrokeColor(options.strokeColor)
83 | }
84 | if (!isUndefined(options.strokeOpacity)) {
85 | this.polyline.setStrokeOpacity(options.strokeOpacity)
86 | }
87 | if (!isUndefined(options.strokeStyle)) {
88 | this.polyline.setStrokeStyle(options.strokeStyle)
89 | }
90 | if (!isUndefined(options.strokeWeight)) {
91 | this.polyline.setStrokeWeight(options.strokeWeight)
92 | }
93 | }
94 |
95 | private addListener(polyline: BPolyline, map: BMapInstance) {
96 | polyline.addEventListener('click', (e: any) => {
97 | console.log('sfdsfdsfds')
98 | this.clicked.emit({
99 | e,
100 | map,
101 | polyline
102 | })
103 | })
104 | }
105 | }
106 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/components/tilelayer.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Directive,
3 | EventEmitter,
4 | Input,
5 | OnDestroy,
6 | OnInit,
7 | Output
8 | } from '@angular/core'
9 |
10 | import { MapService } from '../providers/mapService'
11 | import {
12 | BTileLayer,
13 | TileLayerOptions,
14 | GetTilesUrlFunc
15 | } from '../types/TileLayer'
16 | import { BPixel } from '../types/Pixel'
17 |
18 | @Directive({
19 | selector: 'tilelayer'
20 | })
21 | export class TileLayerComponent implements OnInit, OnDestroy {
22 | @Input()
23 | private getTilesUrl: GetTilesUrlFunc
24 |
25 | @Input()
26 | private options: TileLayerOptions
27 |
28 | @Output()
29 | private loaded = new EventEmitter()
30 |
31 | private tilelayer: BTileLayer
32 |
33 | constructor(private service: MapService) {}
34 |
35 | public ngOnInit() {
36 | const func = this.getTilesUrl
37 |
38 | this.service
39 | .addTileLayer(() => {
40 | this.tilelayer = new window.BMap.TileLayer(this.options)
41 |
42 | if (this.getTilesUrl) {
43 | this.tilelayer.getTilesUrl = (tileCoord: BPixel, zoom: number) => {
44 | return func(tileCoord, zoom)
45 | }
46 | }
47 | return this.tilelayer
48 | })
49 | .then(() => {
50 | this.loaded.emit(this.tilelayer)
51 | })
52 | }
53 |
54 | public ngOnDestroy() {
55 | this.service.removeTileLayer(this.tilelayer)
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/components/trafficlayer.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Directive,
3 | EventEmitter,
4 | Input,
5 | OnDestroy,
6 | OnInit,
7 | Output
8 | } from '@angular/core'
9 |
10 | import { MapService } from '../providers/mapService'
11 | import { BTrafficLayer, TrafficLayerOptions } from '../types/TrafficLayer'
12 |
13 | @Directive({
14 | selector: 'trafficlayer'
15 | })
16 | export class TrafficLayerComponent implements OnInit, OnDestroy {
17 | @Input()
18 | private options: TrafficLayerOptions
19 |
20 | @Output()
21 | private loaded = new EventEmitter()
22 |
23 | private trafficlayer: BTrafficLayer
24 |
25 | constructor(private service: MapService) {}
26 |
27 | public ngOnInit() {
28 | this.service
29 | .addTileLayer(() => {
30 | this.trafficlayer = new window.BMap.TrafficLayer(this.options)
31 | return this.trafficlayer
32 | })
33 | .then(() => {
34 | this.loaded.emit(this.trafficlayer)
35 | })
36 | }
37 |
38 | public ngOnDestroy() {
39 | this.service.removeTileLayer(this.trafficlayer)
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/helpers/object.ts:
--------------------------------------------------------------------------------
1 | export function isNull(obj: any) {
2 | return obj === null || obj === undefined
3 | }
4 |
5 | export function isUndefined(obj: any) {
6 | return obj === undefined
7 | }
8 |
9 | export function isBoolean(obj: any): obj is boolean {
10 | return Object.prototype.toString.call(obj) === '[object Boolean]'
11 | }
12 |
13 | export function isFunction(obj: any): obj is boolean {
14 | return Object.prototype.toString.call(obj) === '[object Function]'
15 | }
16 |
17 | export function isString(obj: any): obj is boolean {
18 | return Object.prototype.toString.call(obj) === '[object String]'
19 | }
20 |
21 | export function isNumber(obj: any): obj is boolean {
22 | return Object.prototype.toString.call(obj) === '[object Number]'
23 | }
24 |
25 | export function omit(obj: T, ...keys: Array): T {
26 | const rawKeys = Object.keys(obj)
27 | const finalKeys = rawKeys.filter(k => keys.indexOf(k) < 0)
28 | return finalKeys.reduce(
29 | (p, v) => {
30 | p[v] = obj[v]
31 | return p
32 | },
33 | {} as T
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/helpers/validate.ts:
--------------------------------------------------------------------------------
1 | import { isNull } from './object'
2 |
3 | export function nullCheck(obj: any, msg: string) {
4 | if (isNull(obj)) {
5 | throw new Error(msg)
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | import { ModuleWithProviders, NgModule } from '@angular/core'
2 |
3 | import { ControlComponent } from './components/control.component'
4 | import { MapComponent } from './components/map.component'
5 | import { MarkerComponent } from './components/marker.component'
6 | import { PolylineComponent } from './components/polyline.component'
7 | import { CircleComponent } from './components/circle.component'
8 | import { PolygonComponent } from './components/polygon.component'
9 | import { HeatmapComponent } from './components/heatmap.component'
10 | import { TileLayerComponent } from './components/tilelayer.component'
11 | import { TrafficLayerComponent } from './components/trafficlayer.component'
12 | import { CanvasLayerComponent } from './components/canvaslayer.component'
13 | import { MarkerClustererComponent } from './components/markerClusterer.component'
14 | import {
15 | LOADING_STATE,
16 | ScriptLoader,
17 | ScriptLoaderConfig
18 | } from './providers/scriptLoader'
19 |
20 | import { BMap } from './types/BMap'
21 | import { BMapLib } from './types/BMapLib'
22 |
23 | @NgModule({
24 | declarations: [
25 | MapComponent,
26 | MarkerComponent,
27 | ControlComponent,
28 | PolylineComponent,
29 | CircleComponent,
30 | PolygonComponent,
31 | HeatmapComponent,
32 | TileLayerComponent,
33 | TrafficLayerComponent,
34 | CanvasLayerComponent,
35 | MarkerClustererComponent
36 | ],
37 | exports: [
38 | MapComponent,
39 | MarkerComponent,
40 | ControlComponent,
41 | PolylineComponent,
42 | CircleComponent,
43 | PolygonComponent,
44 | HeatmapComponent,
45 | TileLayerComponent,
46 | TrafficLayerComponent,
47 | CanvasLayerComponent,
48 | MarkerClustererComponent
49 | ]
50 | })
51 | export class BaiduMapModule {
52 | public static forRoot(config?: ScriptLoaderConfig): ModuleWithProviders {
53 | return {
54 | ngModule: BaiduMapModule,
55 | providers: [
56 | { provide: ScriptLoaderConfig, useValue: config },
57 | ScriptLoader
58 | ]
59 | }
60 | }
61 | }
62 |
63 | export { BMapInstance, MapOptions, MapTypeEnum } from './types/Map'
64 | export { BMapType } from './types/MapType'
65 | export { BProjection } from './types/Projection'
66 | export { Point } from './types/Point'
67 | export { BMarker, Marker, MarkerOptions } from './types/Marker'
68 | export { BPolyline, PolylineOptions } from './types/Polyline'
69 | export { BCircle, CircleOptions } from './types/Circle'
70 | export { BPolygon, PolygonOptions } from './types/Polygon'
71 | export { BHeatmap, HeatmapOptions, HeatmapData } from './types/Heatmap'
72 | export {
73 | BTileLayer,
74 | TileLayerOptions,
75 | GetTilesUrlFunc as getTilesUrlFunc
76 | } from './types/TileLayer'
77 | export {
78 | BTrafficLayer,
79 | TrafficLayerOptions,
80 | PredictDate
81 | } from './types/TrafficLayer'
82 | export { BCanvasLayer, CanvasLayerOptions } from './types/CanvasLayer'
83 | export {
84 | BMarkerClusterer,
85 | MarkerClustererOptions
86 | } from './types/MarkerClusterer'
87 | export { TextIconStyle } from './types/TextIconOverlay'
88 | export {
89 | BControl,
90 | BNavigationControl,
91 | BOverviewMapControl,
92 | BScaleControl,
93 | BMapTypeControl,
94 | BGeolocationControl,
95 | BPanoramaControlControl,
96 | ControlType,
97 | ControlAnchor,
98 | GeolocationControlOptions,
99 | LengthUnit,
100 | NavigationControlOptions,
101 | NavigationControlType,
102 | OverviewMapControlOptions,
103 | ScaleControlOptions,
104 | MapTypeControlOptions,
105 | MapTypeControlType
106 | } from './types/Control'
107 | export {
108 | BInfoWindowConstructor,
109 | BInfoWindowOptions,
110 | BInfoWindow
111 | } from './types/InfoWindow'
112 | export { Animation } from './types/Animation'
113 |
114 | declare global {
115 | interface Window {
116 | _scriptLoadState: { [url: string]: LOADING_STATE }
117 | _loadingCallbacks: { [url: string]: Array<() => void> }
118 | BMap: BMap
119 | BMapLib: BMapLib
120 | baidumapinit: () => void
121 | BMAP_PERSPECTIVE_MAP: any
122 | }
123 | }
124 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/providers/mapService.ts:
--------------------------------------------------------------------------------
1 | import { Injectable, Inject } from '@angular/core'
2 | import { isBoolean, isNull, omit } from '../helpers/object'
3 | import { nullCheck } from '../helpers/validate'
4 | import { BControl } from '../types/Control'
5 | import { ScriptLoaderConfig } from './scriptLoader'
6 | import { BMapInstance, MapOptions, isMapTypeEnum } from '../types/Map'
7 | import { Overlay } from '../types/Overlay'
8 | import { BTileLayer } from '../types/TileLayer'
9 |
10 | import { toPoint } from '../helpers/transformer'
11 |
12 | import { ScriptLoader } from './scriptLoader'
13 |
14 | @Injectable()
15 | export class MapService {
16 | private config: ScriptLoaderConfig
17 |
18 | private map: Promise
19 | private mapResolver: (value: BMapInstance) => void
20 |
21 | constructor(
22 | @Inject(ScriptLoaderConfig) config: ScriptLoaderConfig,
23 | private loader: ScriptLoader
24 | ) {
25 | nullCheck(config.ak, 'ak must be provided')
26 |
27 | this.config = config
28 |
29 | this.map = new Promise((resolve: () => void) => {
30 | this.mapResolver = resolve
31 | })
32 | }
33 |
34 | public createMap(
35 | el: HTMLElement,
36 | mapOptions: MapOptions
37 | ): Promise {
38 | const URL = `https://api.map.baidu.com/api?v=3.0&ak=${this.config.ak}&callback=baidumapinit`
39 |
40 | return new Promise(resolve => {
41 | this.loader.load(URL, true, () => {
42 | const map = new window.BMap.Map(el, omit(mapOptions, 'mapType'))
43 | this.setOptions(mapOptions)
44 | this.mapResolver(map)
45 | resolve(map)
46 | })
47 | })
48 | }
49 |
50 | public setOptions(opts: MapOptions): void {
51 | const {
52 | disableDragging,
53 | enableScrollWheelZoom,
54 | disableDoubleClickZoom,
55 | enableKeyboard,
56 | enableInertialDragging,
57 | enableAutoResize,
58 | enableContinuousZoom,
59 | disablePinchToZoom
60 | } = opts
61 |
62 | if (isBoolean(disableDragging)) {
63 | this.map.then(map =>
64 | map[(disableDragging ? 'disable' : 'enable') + 'Dragging']()
65 | )
66 | }
67 | if (isBoolean(enableScrollWheelZoom)) {
68 | this.map.then(map =>
69 | map[
70 | (enableScrollWheelZoom ? 'enable' : 'disable') + 'ScrollWheelZoom'
71 | ]()
72 | )
73 | }
74 | if (isBoolean(enableAutoResize)) {
75 | this.map.then(map =>
76 | map[(enableAutoResize ? 'enable' : 'disable') + 'AutoResize']()
77 | )
78 | }
79 | if (isBoolean(disableDoubleClickZoom)) {
80 | this.map.then(map =>
81 | map[
82 | (disableDoubleClickZoom ? 'disable' : 'enable') + 'DoubleClickZoom'
83 | ]()
84 | )
85 | }
86 | if (isBoolean(enableKeyboard)) {
87 | this.map.then(map =>
88 | map[(enableKeyboard ? 'enable' : 'disable') + 'Keyboard']()
89 | )
90 | }
91 | if (isBoolean(enableInertialDragging)) {
92 | this.map.then(map =>
93 | map[
94 | (enableInertialDragging ? 'enable' : 'disable') + 'InertialDragging'
95 | ]()
96 | )
97 | }
98 | if (isBoolean(enableContinuousZoom)) {
99 | this.map.then(map =>
100 | map[(enableContinuousZoom ? 'enable' : 'disable') + 'ContinuousZoom']()
101 | )
102 | }
103 | if (isBoolean(disablePinchToZoom)) {
104 | this.map.then(map =>
105 | map[(disablePinchToZoom ? 'disable' : 'enable') + 'PinchToZoom']()
106 | )
107 | }
108 | if (!isNull(opts.cursor)) {
109 | this.map.then(map => map.setDefaultCursor(opts.cursor))
110 | }
111 | if (!isNull(opts.draggingCursor)) {
112 | this.map.then(map => map.setDraggingCursor(opts.draggingCursor))
113 | }
114 | if (!isNull(opts.currentCity)) {
115 | this.map.then(map => map.setCurrentCity(opts.currentCity))
116 | }
117 | if (!isNull(opts.centerAndZoom)) {
118 | this.map.then(map => {
119 | map.centerAndZoom(toPoint(opts.centerAndZoom), opts.centerAndZoom.zoom)
120 | })
121 | }
122 | if (!isNull(opts.mapType)) {
123 | this.map.then(map => {
124 | const realType = isMapTypeEnum(opts.mapType)
125 | ? window[opts.mapType]
126 | : opts.mapType
127 | map.setMapType(realType)
128 | })
129 | }
130 | }
131 |
132 | public addOverlay(
133 | cb: (map: BMapInstance) => Overlay
134 | ): Promise<{ map: BMapInstance; overlay: Overlay }> {
135 | return this.map.then((map: BMapInstance) => {
136 | const overlay = cb(map)
137 | map.addOverlay(overlay)
138 | return { map, overlay }
139 | })
140 | }
141 |
142 | public removeOverlay(overlay: Overlay): Promise {
143 | return this.map.then((map: BMapInstance) => {
144 | map.removeOverlay(overlay)
145 | })
146 | }
147 |
148 | public addTileLayer(
149 | cb: (map: BMapInstance) => BTileLayer
150 | ): Promise<{ map: BMapInstance; tilelayer: BTileLayer }> {
151 | return this.map.then((map: BMapInstance) => {
152 | const tilelayer = cb(map)
153 | map.addTileLayer(tilelayer)
154 | return { map, tilelayer }
155 | })
156 | }
157 |
158 | public removeTileLayer(tilelayer: BTileLayer): Promise {
159 | return this.map.then((map: BMapInstance) => {
160 | map.removeOverlay(tilelayer)
161 | })
162 | }
163 |
164 | public addControl(
165 | cb: (map: BMapInstance) => BControl
166 | ): Promise<{ map: BMapInstance; control: BControl }> {
167 | return this.map.then((map: BMapInstance) => {
168 | const control = cb(map)
169 | map.addControl(control)
170 | return { map, control }
171 | })
172 | }
173 |
174 | public removeControl(control: BControl): Promise {
175 | return this.map.then((map: BMapInstance) => {
176 | map.removeControl(control)
177 | })
178 | }
179 |
180 | public getNativeMap(): Promise {
181 | return this.map
182 | }
183 | }
184 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/providers/scriptLoader.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core'
2 | import { isString } from '../helpers/object'
3 | import { ScriptType } from '../types/Script'
4 |
5 | export enum LOADING_STATE {
6 | NON = 0,
7 | LOADED = 1,
8 | LOADING = 2
9 | }
10 |
11 | export class ScriptLoaderConfig {
12 | public ak = ''
13 | }
14 |
15 | @Injectable()
16 | export class ScriptLoader {
17 | constructor() {
18 | window._scriptLoadState = {}
19 | window._loadingCallbacks = {}
20 | }
21 |
22 | public load(
23 | url: string | ScriptType,
24 | isMain: boolean = false,
25 | cb: () => void
26 | ): void {
27 | // tslint:disable: no-string-literal
28 | const scriptKey = isString(url) ? url : url['key']
29 | const scriptUrls = isString(url) ? [url] : url['scripts']
30 | // tslint:enable: no-string-literal
31 |
32 | if (window._scriptLoadState[scriptKey] === LOADING_STATE.LOADED) {
33 | if (isMain) {
34 | switchDisplay('baidu-map .baidu-map-instance', 'block')
35 | switchDisplay('baidu-map .baidu-map-offline', 'none')
36 | }
37 | return cb()
38 | }
39 | if (!window._loadingCallbacks[scriptKey]) {
40 | window._loadingCallbacks[scriptKey] = []
41 | }
42 | if (window._scriptLoadState[scriptKey] === LOADING_STATE.LOADING) {
43 | window._loadingCallbacks[scriptKey].push(cb)
44 | return
45 | }
46 | window._scriptLoadState[scriptKey] = LOADING_STATE.LOADING
47 | window._loadingCallbacks[scriptKey].push(cb)
48 |
49 | if (isMain) {
50 | window.baidumapinit = () => {
51 | window._scriptLoadState[scriptKey] = LOADING_STATE.LOADED
52 | switchDisplay('baidu-map .baidu-map-instance', 'block')
53 | switchDisplay('baidu-map .baidu-map-offline', 'none')
54 | window._loadingCallbacks[scriptKey].forEach((c: () => void) => {
55 | c()
56 | })
57 | }
58 | }
59 | appendScriptsTag(scriptKey, scriptUrls, isMain)
60 | }
61 | }
62 |
63 | function appendScriptsTag(
64 | scriptKey: string,
65 | urls: Array,
66 | isMain: boolean
67 | ) {
68 | const leftObj = {
69 | count: urls.length
70 | }
71 | urls.forEach(url => {
72 | appendScriptTag(scriptKey, url, isMain, leftObj)
73 | })
74 | }
75 |
76 | function appendScriptTag(
77 | scriptKey: string,
78 | url: string,
79 | isMain: boolean,
80 | leftObj: { count: number }
81 | ) {
82 | const script = document.createElement('script')
83 | script.type = 'text/javascript'
84 | script.src = url
85 | script.onerror = () => {
86 | if (isMain) {
87 | switchDisplay('baidu-map .baidu-map-offline', 'block')
88 | switchDisplay('baidu-map .baidu-map-instance', 'none')
89 | }
90 | document.body.removeChild(script)
91 |
92 | setTimeout(() => {
93 | appendScriptTag(scriptKey, url, isMain, leftObj)
94 | }, 30000)
95 | }
96 |
97 | if (!isMain) {
98 | script.onload = () => {
99 | leftObj.count--
100 | if (leftObj.count) {
101 | return
102 | }
103 | window._scriptLoadState[scriptKey] = LOADING_STATE.LOADED
104 | window._loadingCallbacks[scriptKey].forEach((c: () => void) => {
105 | c()
106 | })
107 | }
108 | }
109 | document.body.appendChild(script)
110 | }
111 |
112 | function switchDisplay(selector: string, state: string) {
113 | Array.prototype.slice
114 | .call(document.querySelectorAll(selector))
115 | .forEach((node: HTMLElement) => {
116 | node.style.display = state
117 | })
118 | }
119 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/Animation.ts:
--------------------------------------------------------------------------------
1 |
2 | export enum Animation {
3 | BMAP_ANIMATION_DROP = 1,
4 | BMAP_ANIMATION_BOUNCE = 2,
5 | }
6 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/BMap.ts:
--------------------------------------------------------------------------------
1 | import {
2 | BGeolocationConstructor,
3 | BMapTypeControlConstructor,
4 | BNavigationControlConstructor,
5 | BOverviewMapControlConstructor,
6 | BPanoramaControlConstructor,
7 | BScaleControlConstructor
8 | } from './Control'
9 | import { BIconConstructor } from './Icon'
10 | import { BInfoWindowConstructor } from './InfoWindow'
11 | import { BLabelConstructor } from './Label'
12 | import { BMapConstructor } from './Map'
13 | import { BMarkerConstructor } from './Marker'
14 | import { BPolylineConstructor } from './Polyline'
15 | import { BPointConstructor } from './Point'
16 | import { BSizeConstructor } from './Size'
17 | import { BCircleConstructor } from './Circle'
18 | import { BPolygonConstructor } from './Polygon'
19 | import { BTileLayerConstructor } from './TileLayer'
20 | import { BTrafficLayerConstructor } from './TrafficLayer'
21 | import { BCanvasLayerConstructor } from './CanvasLayer'
22 |
23 | export interface BMap {
24 | Map: BMapConstructor
25 | Marker: BMarkerConstructor
26 | Polyline: BPolylineConstructor
27 | Circle: BCircleConstructor
28 | Polygon: BPolygonConstructor
29 | TileLayer: BTileLayerConstructor
30 | TrafficLayer: BTrafficLayerConstructor
31 | CanvasLayer: BCanvasLayerConstructor
32 | Point: BPointConstructor
33 | Size: BSizeConstructor
34 | Icon: BIconConstructor
35 | Label: BLabelConstructor
36 | InfoWindow: BInfoWindowConstructor
37 | NavigationControl: BNavigationControlConstructor
38 | OverviewMapControl: BOverviewMapControlConstructor
39 | ScaleControl: BScaleControlConstructor
40 | MapTypeControl: BMapTypeControlConstructor
41 | GeolocationControl: BGeolocationConstructor
42 | PanoramaControl: BPanoramaControlConstructor
43 | }
44 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/BMapLib.ts:
--------------------------------------------------------------------------------
1 | import { BHeatmapConstructor } from './Heatmap'
2 | import { BMarkerClustererConstructor } from './MarkerClusterer'
3 |
4 | export interface BMapLib {
5 | HeatmapOverlay: BHeatmapConstructor
6 | MarkerClusterer: BMarkerClustererConstructor
7 | }
8 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/Bounds.ts:
--------------------------------------------------------------------------------
1 | import { BPoint } from './Point'
2 |
3 | export interface BBoundsConstructor {
4 | new (sw: BPoint, ne: BPoint): BBounds
5 | }
6 |
7 | export interface BBounds {
8 | equals(other: BBounds): boolean
9 | containsPoint(point: BPoint): boolean
10 | containsBounds(bounds: BBounds): boolean
11 | intersects(other: BBounds): BBounds
12 | extend(point: BPoint): void
13 | getCenter(): BPoint
14 | isEmpty(): boolean
15 | getSouthWest(): BPoint
16 | getNorthEast(): BPoint
17 | toSpan(): BPoint
18 | }
19 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/CanvasLayer.ts:
--------------------------------------------------------------------------------
1 | import { Overlay } from './Overlay'
2 | import { BMapInstance } from './Map'
3 |
4 | export interface BCanvasLayerConstructor {
5 | new (options?: BCanvasLayerOptions): BCanvasLayer
6 | }
7 |
8 | export interface CanvasLayerOptions {
9 | zIndex?: number
10 | paneName?: string
11 | update?: (map: BMapInstance, canvas: HTMLCanvasElement) => void
12 | }
13 |
14 | export interface BCanvasLayerOptions {
15 | zIndex?: number
16 | paneName?: string
17 | update?: Function
18 | }
19 |
20 | export interface BCanvasLayer extends Overlay {}
21 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/Circle.ts:
--------------------------------------------------------------------------------
1 | import { Overlay } from './Overlay'
2 | import { BPoint } from './Point'
3 |
4 | export interface BCircleConstructor {
5 | new (center: BPoint, radius: number, options?: CircleOptions): BCircle
6 | }
7 |
8 | export interface BCircle extends Overlay {
9 | setCenter(center: BPoint): void
10 | setRadius(radius: number): void
11 | setStrokeColor(strokeColor: string): void
12 | setFillColor(fillColor: string): void
13 | setStrokeOpacity(strokeOpacity: number): void
14 | setFillOpacity(fillOpacity: number): void
15 | setStrokeWeight(strokeWeight: number): void
16 | setStrokeStyle(strokeStyle: string): void
17 | enableEditing(): void
18 | disableEditing(): void
19 | enableMassClear(): void
20 | disableMassClear(): void
21 | }
22 |
23 | export interface CircleOptions {
24 | strokeColor?: string
25 | fillColor?: string
26 | strokeWeight?: number
27 | strokeOpacity?: number
28 | fillOpacity?: number
29 | strokeStyle?: string
30 | enableMassClear?: boolean
31 | enableEditing?: boolean
32 | enableClicking?: boolean
33 | }
34 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/Control.ts:
--------------------------------------------------------------------------------
1 | import { BIcon, Icon } from './Icon'
2 | import { BSize, Size } from './Size'
3 | import { BMapType } from './MapType'
4 | import { MapTypeEnum } from './Map'
5 |
6 | export interface BControlConstructor {
7 | new (opts: any): BControl
8 | }
9 |
10 | export interface BControl {}
11 |
12 | export interface BNavigationControlConstructor extends BControlConstructor {
13 | new (opts: BNavigationControlOptions): BNavigationControl
14 | }
15 |
16 | export interface BOverviewMapControlConstructor extends BControlConstructor {
17 | new (opts: BOverviewMapControlOptions): BOverviewMapControl
18 | }
19 |
20 | export interface BScaleControlConstructor extends BControlConstructor {
21 | new (opts: BScaleControlOptions): BScaleControl
22 | }
23 |
24 | export interface BMapTypeControlConstructor extends BControlConstructor {
25 | new (opts: BMapTypeControlOptions): BMapTypeControl
26 | }
27 |
28 | export interface BGeolocationConstructor extends BControlConstructor {
29 | new (opts: BGeolocationControlOptions): BGeolocationControl
30 | }
31 |
32 | export interface BPanoramaControlConstructor extends BControlConstructor {
33 | new (): BPanoramaControlControl
34 | }
35 |
36 | export interface BNavigationControl extends BControl {
37 | getType(): NavigationControlType
38 | setType(type: NavigationControlType): void
39 | }
40 |
41 | export interface BOverviewMapControl extends BControl {
42 | changeView(): void
43 | setSize(size: BSize): void
44 | getSize(): BSize
45 | }
46 |
47 | export interface BScaleControl extends BControl {
48 | getUnit(): LengthUnit
49 | setUnit(unit: LengthUnit): void
50 | }
51 |
52 | export interface BMapTypeControl extends BControl {}
53 |
54 | export interface BGeolocationControl extends BControl {
55 | location(): void
56 | getAddressComponent(): AddressComponent
57 | }
58 |
59 | export interface BPanoramaControlControl extends BControl {}
60 |
61 | export interface ControlOptions {
62 | anchor?: ControlAnchor
63 | offset?: Size
64 | }
65 |
66 | export interface BControlOptions {
67 | anchor?: ControlAnchor
68 | offset?: BSize
69 | }
70 |
71 | export interface NavigationControlOptions extends ControlOptions {
72 | type?: NavigationControlType
73 | showZoomInfo?: boolean
74 | enableGeolocation?: boolean
75 | }
76 |
77 | export interface BNavigationControlOptions extends BControlOptions {
78 | type?: NavigationControlType
79 | showZoomInfo?: boolean
80 | enableGeolocation?: boolean
81 | }
82 |
83 | export interface OverviewMapControlOptions extends ControlOptions {
84 | size?: Size
85 | isOpen?: boolean
86 | }
87 |
88 | export interface BOverviewMapControlOptions extends BControlOptions {
89 | size?: BSize
90 | isOpen?: boolean
91 | }
92 |
93 | export interface ScaleControlOptions extends ControlOptions {}
94 |
95 | export interface BScaleControlOptions extends BControlOptions {}
96 |
97 | export interface MapTypeControlOptions {
98 | type?: MapTypeControlType
99 | mapTypes?: Array
100 | }
101 |
102 | export interface BMapTypeControlOptions {
103 | type?: MapTypeControlType
104 | mapTypes?: Array
105 | }
106 |
107 | export interface GeolocationControlOptions extends ControlOptions {
108 | showAddressBar?: boolean
109 | enableAutoLocation?: boolean
110 | locationIcon?: Icon
111 | }
112 |
113 | export interface BGeolocationControlOptions extends BControlOptions {
114 | showAddressBar?: boolean
115 | enableAutoLocation?: boolean
116 | locationIcon?: BIcon
117 | }
118 |
119 | export enum ControlAnchor {
120 | BMAP_ANCHOR_TOP_LEFT = 0,
121 | BMAP_ANCHOR_TOP_RIGHT = 1,
122 | BMAP_ANCHOR_BOTTOM_LEFT = 2,
123 | BMAP_ANCHOR_BOTTOM_RIGHT = 3
124 | }
125 |
126 | export enum NavigationControlType {
127 | BMAP_NAVIGATION_CONTROL_LARGE = 0,
128 | BMAP_NAVIGATION_CONTROL_SMALL = 1,
129 | BMAP_NAVIGATION_CONTROL_PAN = 2,
130 | BMAP_NAVIGATION_CONTROL_ZOOM = 3
131 | }
132 |
133 | export enum MapTypeControlType {
134 | BMAP_MAPTYPE_CONTROL_HORIZONTAL = 0,
135 | BMAP_MAPTYPE_CONTROL_DROPDOWN = 1,
136 | BMAP_MAPTYPE_CONTROL_MAP = 2
137 | }
138 |
139 | export enum LengthUnit {
140 | BMAP_UNIT_METRIC = 'metric',
141 | BMAP_UNIT_IMPERIAL = 'us'
142 | }
143 |
144 | export interface AddressComponent {
145 | streetNumber: string
146 | street: string
147 | district: string
148 | city: string
149 | province: string
150 | }
151 |
152 | export type ControlType = 'navigation' | 'overviewmap' | 'scale' | 'maptype' | 'geolocation' | 'panorama'
153 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/Copyright.ts:
--------------------------------------------------------------------------------
1 | import { BBounds } from './Bounds'
2 |
3 | export interface BCopyright {
4 | id: number
5 | content: string
6 | bounds: BBounds
7 | }
8 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/Heatmap.ts:
--------------------------------------------------------------------------------
1 | import { Overlay } from './Overlay'
2 | import { Point } from './Point'
3 |
4 | export interface BHeatmapConstructor {
5 | new (options?: HeatmapOptions): BHeatmap
6 | }
7 |
8 | export interface BHeatmap extends Overlay {
9 | setDataSet(data: HeatmapData): void
10 | setOptions(options: HeatmapOptions): void
11 | }
12 |
13 | export interface HeatmapOptions {
14 | radius?: number
15 | visible?: boolean
16 | gradient?: any
17 | opacity?: number
18 | }
19 |
20 | export interface HeatmapPoint extends Point {
21 | count: number
22 | }
23 |
24 | export interface HeatmapData {
25 | data: Array
26 | max: number
27 | }
28 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/Icon.ts:
--------------------------------------------------------------------------------
1 | import { BSize, Size } from './Size'
2 |
3 | export interface BIconConstructor {
4 | new (url: string, size?: BSize, opts?: BIconOptions): BIcon
5 | }
6 |
7 | export interface BIcon {
8 | anchor?: BSize
9 | size?: BSize
10 | imageOffset?: BSize
11 | imageSize?: BSize
12 | imageUrl?: string
13 | infoWindowAnchor?: BSize
14 | printImageUrl?: string
15 |
16 | setImageUrl(imageUrl: string): void
17 | setSize(size: BSize): void
18 | setImageSize(imageSize: BSize): void
19 | setAnchor(anchor: BSize): void
20 | setImageOffset(offset: BSize): void
21 | setInfoWindowAnchor(anchor: BSize): void
22 | setPrintImageUrl(url: string): void
23 | }
24 |
25 | export interface Icon {
26 | anchor?: Size
27 | size?: Size
28 | imageOffset?: Size
29 | imageSize?: Size
30 | imageUrl?: string
31 | infoWindowAnchor?: Size
32 | printImageUrl?: string
33 | }
34 |
35 | export interface IconOptions {
36 | anchor?: Size
37 | imageOffset?: Size
38 | imageSize?: Size
39 | infoWindowAnchor?: Size
40 | printImageUrl?: string
41 | }
42 |
43 | export interface BIconOptions {
44 | anchor?: BSize
45 | imageOffset?: BSize
46 | infoWindowAnchor?: BSize
47 | printImageUrl?: string
48 | }
49 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/InfoWindow.ts:
--------------------------------------------------------------------------------
1 | import { BSize } from './Size'
2 | import { BPoint } from './Point'
3 |
4 | export interface BInfoWindowConstructor {
5 | new (content: string | HTMLElement, opts?: BInfoWindowOptions): BInfoWindow
6 | }
7 |
8 | export interface BInfoWindow {
9 | setWidth(width: number): void
10 | setHeight(height: number): void
11 | redraw(): void
12 | setTitle(title: string | HTMLElement): void
13 | getTitle(): string | HTMLElement
14 | setContent(content: string | HTMLElement): void
15 | getContent(): string | HTMLElement
16 | getPosition(): BPoint
17 | enableMaximize(): void
18 | disableMaximize(): void
19 | isOpen(): boolean
20 | setMaxContent(content: string): void
21 | maximize(): void
22 | restore(): void
23 | enableAutoPan(): void
24 | disableAutoPan(): void
25 | enableCloseOnClick(): void
26 | disableCloseOnClick(): void
27 | addEventListener(event: string, handler: Function): void
28 | removeEventListener(event: string, handler: Function): void
29 | }
30 |
31 | export interface BInfoWindowOptions {
32 | width?: number
33 | height?: number
34 | maxWidth?: number
35 | offset?: BSize
36 | title?: string
37 | enableAutoPan?: boolean
38 | enableCloseOnClick?: boolean
39 | enableMessage?: boolean
40 | message?: string
41 | }
42 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/Label.ts:
--------------------------------------------------------------------------------
1 | import { BPointConstructor, BPoint } from './Point'
2 | import { BSize } from './Size'
3 |
4 | export interface BLabelConstructor {
5 | new (content: string, opts?: BLabelOptions): BLabel
6 | }
7 |
8 | export interface BLabel {
9 | setStyle(styles: any): void
10 | setContent(content: string): void
11 | setPosition(postion: BPointConstructor): void
12 |
13 | setTitle(title: string): void
14 | getTitle(): string
15 | }
16 |
17 | export interface BLabelOptions {
18 | offset?: BSize
19 | position?: BPoint
20 | enableMassClear?: boolean
21 | }
22 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/Map.ts:
--------------------------------------------------------------------------------
1 | import { BBounds } from './Bounds'
2 | import { BControl } from './Control'
3 | import { Overlay } from './Overlay'
4 | import { BPoint, Point } from './Point'
5 | import { BTileLayer } from './TileLayer'
6 | import { isFunction } from '../helpers/object'
7 | import { BSize } from './Size'
8 | import { BInfoWindow } from './InfoWindow'
9 | import { BMapType } from './MapType'
10 | import { BPixel } from './Pixel'
11 |
12 | export interface BMapConstructor {
13 | new (el: HTMLElement | string, opts: MapOptions): BMapInstance
14 | }
15 |
16 | export interface BMapInstance {
17 | disableDragging(): void
18 | enableDragging(): void
19 |
20 | disableScrollWheelZoom(): void
21 | enableScrollWheelZoom(): void
22 |
23 | disableDoubleClickZoom(): void
24 | enableDoubleClickZoom(): void
25 |
26 | disableKeyboard(): void
27 | enableKeyboard(): void
28 |
29 | disableInertialDragging(): void
30 | enableInertialDragging(): void
31 |
32 | disableContinuousZoom(): void
33 | enableContinuousZoom(): void
34 |
35 | disablePinchToZoom(): void
36 | enablePinchToZoom(): void
37 |
38 | disableAutoResize(): void
39 | enableAutoResize(): void
40 |
41 | addControl(control: BControl): void
42 | removeControl(control: BControl): void
43 |
44 | addOverlay(control: Overlay): void
45 | removeOverlay(control: Overlay): void
46 | clearOverlays(): void
47 |
48 | addTileLayer(tileLayer: BTileLayer): void
49 | removeTileLayer(tileLayer: BTileLayer): void
50 |
51 | setDefaultCursor(cursor: string): void
52 | getDefaultCursor(): string
53 |
54 | setDraggingCursor(draggingCursor: string): void
55 | getDraggingCursor(): string
56 |
57 | setMinZoom(zoom: number): void
58 | setMaxZoom(zoom: number): void
59 |
60 | getBounds(): BBounds
61 |
62 | setCenter(center: BPoint | string): void
63 | getCenter(): BPoint
64 |
65 | getDistance(start: BPoint, end: BPoint): number
66 |
67 | setCurrentCity(city: string): void
68 | centerAndZoom(center: BPoint, zoom: number): void
69 |
70 | setMapType(mapType: BMapType | MapTypeEnum): void
71 | getMapType(): BMapType
72 |
73 | getSize(): BSize
74 |
75 | setZoom(zoom: number): void
76 | getZoom(): number
77 |
78 | panTo(center: BPoint, opts: BPanOptions): void
79 |
80 | panBy(x: number, y: number, opts: BPanOptions): void
81 |
82 | reset(): void
83 |
84 | highResolutionEnabled(): boolean
85 |
86 | zoomIn(): void
87 | zoomOut(): void
88 |
89 | getContainer(): HTMLElement
90 |
91 | closeInfoWindow(): void
92 |
93 | pixelToPoint(pixel: BPixel): BPoint
94 |
95 | pointToPixel(point: BPoint): BPixel
96 |
97 | openInfoWindow(infoWnd: BInfoWindow, point: BPoint): void
98 |
99 | addEventListener(event: string, handler: (e: any) => void): void
100 | removeEventListener(event: string, handler: () => void): void
101 | }
102 |
103 | export interface MapOptions {
104 | minZoom?: number
105 | maxZoom?: number
106 | enableHighResolution?: boolean
107 | enableAutoResize?: boolean
108 | enableMapClick?: boolean
109 |
110 | disableDragging?: boolean
111 | enableScrollWheelZoom?: boolean
112 | disableDoubleClickZoom?: boolean
113 | enableKeyboard?: boolean
114 | enableInertialDragging?: boolean
115 | enableContinuousZoom?: boolean
116 | disablePinchToZoom?: boolean
117 |
118 | cursor?: string
119 | draggingCursor?: string
120 | currentCity?: string
121 | centerAndZoom?: CenterAndZoom
122 |
123 | mapType?: BMapType | MapTypeEnum
124 | }
125 |
126 | export interface CenterAndZoom extends Point {
127 | zoom?: number
128 | }
129 |
130 | export interface BPanOptions {
131 | noAnimation: boolean
132 | }
133 |
134 | export enum MapTypeEnum {
135 | BMAP_NORMAL_MAP = 'BMAP_NORMAL_MAP',
136 | BMAP_PERSPECTIVE_MAP = 'BMAP_PERSPECTIVE_MAP',
137 | BMAP_SATELLITE_MAP = 'BMAP_SATELLITE_MAP',
138 | BMAP_HYBRID_MAP = 'BMAP_HYBRID_MAP'
139 | }
140 |
141 | export function isMapTypeEnum(
142 | maptype: MapTypeEnum | BMapType
143 | ): maptype is MapTypeEnum {
144 | return !isFunction((maptype as BMapType).getTileLayer)
145 | }
146 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/MapType.ts:
--------------------------------------------------------------------------------
1 | import { BTileLayer } from './TileLayer'
2 | import { BProjection } from './Projection'
3 |
4 | export interface BMapTypeConstructor {
5 | new (name: string, layers: BTileLayer | Array, options: BMapTypeOptions): BMapType
6 | }
7 |
8 | export interface BMapTypeOptions {
9 | minZoom: number
10 | maxZoom: number
11 | errorImageUrl: string
12 | textColor: number
13 | tips: string
14 | }
15 |
16 | export interface BMapType {
17 | getName(): string
18 | getTileLayer(): BTileLayer
19 | getMinZoom(): number
20 | getMaxZoom(): number
21 | getProjection(): BProjection
22 | getTextColor(): string
23 | getTips(): string
24 | }
25 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/Marker.ts:
--------------------------------------------------------------------------------
1 | import { BIcon, Icon } from './Icon'
2 | import { BLabel } from './Label'
3 | import { Overlay } from './Overlay'
4 | import { BPoint, Point } from './Point'
5 | import { BSize, Size } from './Size'
6 | import { Animation } from './Animation'
7 |
8 | export interface BMarkerConstructor {
9 | new (point: BPoint, options?: BMarkerOptions): BMarker
10 | }
11 |
12 | export interface BMarker extends Overlay {
13 | addEventListener(event: string, handler: (e: any) => void): void
14 | removeEventListener(event: string, handler: () => void): void
15 | setPosition(position: BPoint): void
16 | setOffset(offset: BSize): void
17 | setIcon(icon: BIcon): void
18 | getIcon(): BIcon
19 | enableMassClear(): void
20 | disableMassClear(): void
21 |
22 | enableDragging(): void
23 | disableDragging(): void
24 |
25 | setRotation(rotation: number): void
26 | setShadow(icon: BIcon): void
27 | setTitle(title: string): void
28 |
29 | setLabel(label: BLabel): void
30 | getLabel(): BLabel
31 |
32 | setTop(isTop: boolean): void
33 |
34 | setAnimation(animation: Animation | null): void
35 |
36 | getPosition(): BPoint
37 | }
38 |
39 | export interface Marker {
40 | point: Point
41 | options?: MarkerOptions
42 | }
43 |
44 | export interface MarkerOptions {
45 | offset?: Size
46 | icon?: Icon
47 | enableMassClear?: boolean
48 | enableDragging?: boolean
49 | enableClicking?: boolean
50 | raiseOnDrag?: boolean
51 | draggingCursor?: string
52 | rotation?: number
53 | shadow?: Icon
54 | title?: string
55 | }
56 |
57 | export interface BMarkerOptions {
58 | offset?: BSize
59 | icon?: BIcon
60 | enableMassClear?: boolean
61 | enableDragging?: boolean
62 | enableClicking?: boolean
63 | raiseOnDrag?: boolean
64 | draggingCursor?: string
65 | rotation?: number
66 | shadow?: BIcon
67 | title?: string
68 | }
69 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/MarkerClusterer.ts:
--------------------------------------------------------------------------------
1 | import { BMarker, Marker } from './Marker'
2 | import { BTextIconStyle, TextIconStyle } from './TextIconOverlay'
3 | import { BMapInstance } from './Map'
4 |
5 | export interface BMarkerClustererConstructor {
6 | new (map: BMapInstance, options?: BMarkerClustererOptions): BMarkerClusterer
7 | }
8 |
9 | export interface BMarkerClusterer {
10 | addMarker(marker: BMarker): void
11 | addMarkers(markers: Array): void
12 | clearMarkers(): void
13 | getClustersCount(): number
14 | getGridSize(): number
15 | getMap(): BMapInstance
16 | getMarkers(): Array
17 | getMaxZoom(): number
18 | getMinClusterSize(): number
19 | getStyles(): Array
20 | isAverageCenter(): boolean
21 | removeMarker(marker: BMarker): boolean
22 | removeMarkers(markers: Array): boolean
23 | setGridSize(gridSize: number): void
24 | setMaxZoom(maxZoom: number): void
25 | setMinClusterSize(size: number): void
26 | setStyles(styles: Array): void
27 | }
28 |
29 | export interface BMarkerClustererOptions {
30 | markers?: Array
31 | girdSize?: number
32 | maxZoom?: number
33 | minClusterSize?: number
34 | isAverangeCenter?: boolean
35 | styles?: Array
36 | }
37 |
38 | export interface MarkerClustererOptions {
39 | markers?: Array
40 | girdSize?: number
41 | maxZoom?: number
42 | minClusterSize?: number
43 | isAverangeCenter?: boolean
44 | styles?: Array
45 | }
46 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/Overlay.ts:
--------------------------------------------------------------------------------
1 | export interface OverlayConstructor {
2 | new (opts: OverlayOptions): any
3 | }
4 |
5 | export interface Overlay {}
6 |
7 | export interface NavigationControl extends Overlay {}
8 |
9 | export interface OverlayOptions {}
10 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/Pixel.ts:
--------------------------------------------------------------------------------
1 | export interface BPixelConstructor {
2 | new (x: number, y: number): BPixel
3 | }
4 |
5 | export interface BPixel {
6 | x: number
7 | y: number
8 | equals(other: BPixel): boolean
9 | }
10 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/Point.ts:
--------------------------------------------------------------------------------
1 | export interface BPointConstructor {
2 | new (lng?: number, lat?: number): BPoint
3 | }
4 |
5 | export interface BPoint {
6 | lng: number
7 | lat: number
8 | equals(other: BPoint): boolean
9 | }
10 |
11 | export interface Point {
12 | lng: number
13 | lat: number
14 | }
15 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/Polygon.ts:
--------------------------------------------------------------------------------
1 | import { Overlay } from './Overlay'
2 | import { BPoint } from './Point'
3 |
4 | export interface BPolygonConstructor {
5 | new (points: Array, options?: PolygonOptions): BPolygon
6 | }
7 |
8 | export interface BPolygon extends Overlay {
9 | setPath(points: Array): void
10 | setStrokeColor(strokeColor: string): void
11 | setFillColor(fillColor: string): void
12 | setStrokeOpacity(strokeOpacity: number): void
13 | setStrokeWeight(strokeWeight: number): void
14 | setFillOpacity(fillOpacity: number): void
15 | setStrokeStyle(strokeStyle: string): void
16 | enableEditing(): void
17 | disableEditing(): void
18 | enableMassClear(): void
19 | disableMassClear(): void
20 | }
21 |
22 | export interface PolygonOptions {
23 | strokeColor?: string
24 | fillColor?: string
25 | strokeWeight?: number
26 | strokeOpacity?: number
27 | fillOpacity?: number
28 | strokeStyle?: string
29 | enableMassClear?: boolean
30 | enableEditing?: boolean
31 | enableClicking?: string
32 | }
33 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/Polyline.ts:
--------------------------------------------------------------------------------
1 | import { Overlay } from './Overlay'
2 | import { BBounds } from './Bounds'
3 | import { BPoint } from './Point'
4 | import { BMapInstance } from './Map'
5 |
6 | export interface BPolylineConstructor {
7 | new (points: Array, options?: PolylineOptions): BPolyline
8 | }
9 |
10 | export interface BPolyline extends Overlay {
11 | setPath(points: Array): void
12 | getPath(): Array
13 | setStrokeColor(strokeColor: string): void
14 | getStrokeColor(): string
15 | setStrokeOpacity(strokeOpacity: number): void
16 | getStrokeOpacity(): number
17 | setStrokeWeight(strokeWeight: number): void
18 | getStrokeWeight(): number
19 | setStrokeStyle(strokeStyle: string): void
20 | getStrokeStyle(): string
21 | getBounds(): BBounds
22 | enableEditing(): void
23 | disableEditing(): void
24 | enableMassClear(): void
25 | disableMassClear(): void
26 | setPositionAt(index: number, point: BPoint): void
27 | getMap(): BMapInstance
28 | addEventListener(event: string, handler: Function): void
29 | removeEventListener(event: string, handler: Function): void
30 | }
31 |
32 | export interface PolylineOptions {
33 | strokeColor?: string
34 | strokeWeight?: number
35 | strokeOpacity?: number
36 | strokeStyle?: string
37 | enableMassClear?: boolean
38 | enableEditing?: boolean
39 | enableClicking?: string
40 | icons?: Array
41 | }
42 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/Projection.ts:
--------------------------------------------------------------------------------
1 | import { BPoint } from './Point'
2 | import { BPixel } from './Pixel'
3 |
4 | export interface BProjection {
5 | lngLatToPoint(lngLat: BPoint): BPixel
6 | pointToLngLat(point: BPixel): BPoint
7 | }
8 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/Script.ts:
--------------------------------------------------------------------------------
1 | export interface ScriptType {
2 | key: string
3 | scripts: Array
4 | }
5 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/Size.ts:
--------------------------------------------------------------------------------
1 | export interface BSizeConstructor {
2 | new (width?: number, height?: number): BSize
3 | }
4 |
5 | export interface BSize {
6 | equals(other: BSize): boolean
7 | }
8 |
9 | export interface Size {
10 | width: number
11 | height: number
12 | }
13 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/TextIconOverlay.ts:
--------------------------------------------------------------------------------
1 | import { BPoint } from './Point'
2 | import { BSize, Size } from './Size'
3 | import { BMapInstance } from './Map'
4 |
5 | export interface BTextIconOverlayConstructor {
6 | new (position: BPoint, text: string, options?: BTextIconOverlayOptions): BTextIconOverlay
7 | }
8 |
9 | export interface BTextIconOverlay {
10 | draw(): void
11 | getPosition(): BPoint
12 | setPosition(point: BPoint): void
13 | getStyleByText(text: string, styles: Array): number
14 | getText(): string
15 | setText(text: string): void
16 | initialize(map: BMapInstance): void
17 | }
18 |
19 | export interface BTextIconOverlayOptions {
20 | styles?: Array
21 | }
22 |
23 | export interface BTextIconStyle {
24 | url: string
25 | size: BSize
26 | anchor?: BSize
27 | offset?: BSize
28 | textSize?: number
29 | textColor?: string
30 | }
31 |
32 | export interface TextIconStyle {
33 | url: string
34 | size: Size
35 | anchor?: Size
36 | offset?: Size
37 | textSize: number
38 | textColor: string
39 | }
40 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/TileLayer.ts:
--------------------------------------------------------------------------------
1 | import { BPixel } from './Pixel'
2 | import { BCopyright } from './Copyright'
3 |
4 | export interface BTileLayerConstructor {
5 | new (options?: TileLayerOptions): BTileLayer
6 | }
7 |
8 | export interface BTileLayer {
9 | getTilesUrl: GetTilesUrlFunc
10 | getCopyright(): BCopyright | null
11 | isTransparentPng(): boolean
12 | }
13 |
14 | export interface TileLayerOptions {
15 | transparentPng?: boolean
16 | tileUrlTemplate?: string
17 | copyright?: BCopyright
18 | zIndex?: number
19 | }
20 |
21 | export interface GetTilesUrlFunc {
22 | (tileCoord: BPixel, zoom: number): string
23 | }
24 |
--------------------------------------------------------------------------------
/projects/lib/src/lib/types/TrafficLayer.ts:
--------------------------------------------------------------------------------
1 | import { BTileLayer } from './TileLayer'
2 |
3 | export interface BTrafficLayerConstructor {
4 | new (options?: TrafficLayerOptions): BTrafficLayer
5 | }
6 |
7 | export interface BTrafficLayer extends BTileLayer {}
8 |
9 | export interface TrafficLayerOptions {
10 | predictDate?: PredictDate
11 | }
12 |
13 | export interface PredictDate {
14 | weekday?: number
15 | hour?: number
16 | }
17 |
--------------------------------------------------------------------------------
/projects/lib/src/public-api.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Public API Surface of lib
3 | */
4 |
5 | export * from './lib/index'
6 |
--------------------------------------------------------------------------------
/projects/lib/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../out-tsc/lib",
5 | "target": "es2015",
6 | "declaration": true,
7 | "inlineSources": true,
8 | "types": [],
9 | "lib": ["dom", "es2018"]
10 | },
11 | "angularCompilerOptions": {
12 | "annotateForClosureCompiler": false,
13 | "skipTemplateCodegen": true,
14 | "strictMetadataEmit": true,
15 | "fullTemplateTypeCheck": true,
16 | "strictInjectionParameters": true,
17 | "enableResourceInlining": true
18 | },
19 | "exclude": ["src/test.ts", "**/*.spec.ts"]
20 | }
21 |
--------------------------------------------------------------------------------
/projects/lib/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tslint.json",
3 | "rules": {
4 | "component-selector": [true, "element", "baidu", "kebab-case"]
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "./out-tsc/app",
5 | "types": []
6 | },
7 | "files": ["demo/main.ts", "demo/polyfills.ts"],
8 | "include": ["demo/**/*.ts"],
9 | "exclude": ["demo/test.ts", "demo/**/*.spec.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "esModuleInterop": true,
5 | "allowSyntheticDefaultImports": true,
6 | "baseUrl": "./",
7 | "outDir": "./dist/out-tsc",
8 | "sourceMap": true,
9 | "declaration": false,
10 | "downlevelIteration": true,
11 | "experimentalDecorators": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "importHelpers": true,
15 | "target": "es2015",
16 | "typeRoots": ["node_modules/@types"],
17 | "lib": ["es2018", "dom"],
18 | "paths": {
19 | "lib": ["dist/lib"],
20 | "lib/*": ["dist/lib/*"],
21 | "angular2-baidu-map": ["dist/lib"],
22 | "@/*": ["demo/*"]
23 | }
24 | },
25 | "angularCompilerOptions": {
26 | "fullTemplateTypeCheck": true,
27 | "strictInjectionParameters": true
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "tslint:recommended",
3 | "rulesDirectory": ["codelyzer"],
4 | "rules": {
5 | "array-type": false,
6 | "arrow-parens": false,
7 | "ban-types": false,
8 | "deprecation": {
9 | "severity": "warning"
10 | },
11 | "callable-types": false,
12 | "import-blacklist": [true, "rxjs/Rx"],
13 | "interface-name": false,
14 | "max-classes-per-file": false,
15 | "max-line-length": [true, 140],
16 | "member-access": false,
17 | "member-ordering": [
18 | true,
19 | {
20 | "order": [
21 | "static-field",
22 | "instance-field",
23 | "static-method",
24 | "instance-method"
25 | ]
26 | }
27 | ],
28 | "no-consecutive-blank-lines": false,
29 | "no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
30 | "no-empty": false,
31 | "no-inferrable-types": [true, "ignore-params"],
32 | "no-non-null-assertion": true,
33 | "no-redundant-jsdoc": true,
34 | "no-switch-case-fall-through": true,
35 | "no-var-requires": false,
36 | "no-empty-interface": false,
37 | "object-literal-key-quotes": [true, "as-needed"],
38 | "object-literal-sort-keys": false,
39 | "ordered-imports": false,
40 | "quotemark": [true, "single"],
41 | "semicolon": false,
42 | "trailing-comma": false,
43 | "component-class-suffix": true,
44 | "contextual-lifecycle": true,
45 | "directive-class-suffix": false,
46 | "no-conflicting-lifecycle": true,
47 | "no-host-metadata-property": true,
48 | "no-input-rename": true,
49 | "no-inputs-metadata-property": true,
50 | "no-output-native": true,
51 | "no-output-on-prefix": true,
52 | "no-output-rename": true,
53 | "no-outputs-metadata-property": true,
54 | "template-banana-in-box": true,
55 | "template-no-negated-async": true,
56 | "use-lifecycle-interface": true,
57 | "use-pipe-transform-interface": true
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
8 |
9 |