Finish: #34. add loaded event for marker component

demo/components/apidoc/docMarker.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core'
 
 import { MapOptions, MarkerOptions, Point } from '../../../src'
 import { environment } from '../../environments/environment'
+import { BMarker } from '../../../src/types/Marker'
 
 @Component({
   selector: 'doc-marker',
@@ -14,7 +15,7 @@ import { environment } from '../../environments/environment'
   <div class="snippet" highlight>
     <pre><code class="html">
     &lt;baidu-map [options]="expression"&gt;
-      &lt;marker [point]="expression" [options]="expression" (clicked)="expression"&gt;&lt;/marker&gt;    
+      &lt;marker [point]="expression" [options]="expression" (loaded)="expression" (clicked)="expression"&gt;&lt;/marker&gt;    
     &lt;/baidu-map&gt;
     </code></pre>
   </div>
@@ -43,6 +44,11 @@ import { environment } from '../../environments/environment'
         Literal for constructing marker. See <a href="#/apidoc/marker-options">MarkerOptions</a>
         </td>
       </tr>
+      <tr>
+        <td>loaded</td>
+        <td><span class="label">expression</span></td>
+        <td>Expression to evaluate upon marker load event. (<code>$event</code> object is available as <a href="http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a3b2" target="_blank">BMap.Marker</a>)</td>
+      </tr>
       <tr>
         <td>clicked</td>
         <td><span class="label">expression</span></td>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular2-baidu-map",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "Angular2 component for Baidu map",
   "main": "./dist/src/index.js",
   "types": "./dist/src/index.d.ts",

src/components/marker.component.ts

@@ -29,6 +29,7 @@ export class MarkerComponent implements OnInit, OnChanges, OnDestroy {
   @Input() private point: Point
   @Input() private options: MarkerOptions
 
+  @Output() private loaded = new EventEmitter()
   @Output() private clicked = new EventEmitter()
 
   private marker: BMarker
@@ -46,6 +47,7 @@ export class MarkerComponent implements OnInit, OnChanges, OnDestroy {
         ))
       })
       .then(({ map }) => {
+        this.loaded.emit(this.marker)
         this.addListener(this.marker, map)
       })
       .then(() => {

src/types/BMap.ts

@@ -8,6 +8,7 @@ import {
 } from './Control'
 import { BIconConstructor } from './Icon'
 import { BInfoWindowConstructor } from './InfoWindow'
+import { BLabelConstructor } from './Label'
 import { BMapConstructor } from './Map'
 import { BMarkerConstructor } from './Marker'
 import { BPointConstructor } from './Point'
@@ -19,6 +20,7 @@ export interface BMap {
   Point: BPointConstructor
   Size: BSizeConstructor
   Icon: BIconConstructor
+  Label: BLabelConstructor
   InfoWindow: BInfoWindowConstructor
   NavigationControl: BNavigationControlConstructor
   OverviewMapControl: BOverviewMapControlConstructor

src/types/Label.ts

@@ -0,0 +1,21 @@
+import { BPointConstructor } from './Point'
+import { BSizeConstructor } from './Size'
+
+export interface BLabelConstructor {
+  new (content: string, opts?: BLabelOptions): BLabel
+}
+
+export interface BLabel {
+  setStyle(styles: any): void
+  setContent(content: string): void
+  setPosition(postion: BPointConstructor): void
+
+  setTitle(title: string): void
+  getTitle(): string
+}
+
+export interface BLabelOptions {
+  offset?: BSizeConstructor
+  position?: BPointConstructor
+  enableMassClear?: boolean
+}

src/types/Marker.ts

@@ -1,4 +1,5 @@
 import { BIconConstructor, Icon } from './Icon'
+import { BLabel } from './Label'
 import { Overlay } from './Overlay'
 import { BPointConstructor } from './Point'
 import { BSizeConstructor, Size } from './Size'
@@ -22,6 +23,9 @@ export interface BMarker extends Overlay {
   setRotation(rotation: number): void
   setShadow(icon: BIconConstructor): void
   setTitle(title: string): void
+
+  setLabel(label: BLabel): void
+  getLabel(): BLabel
 }
 
 export interface MarkerOptions {