angular-material-app documentation
  1. Components
  2. AmapComponent

File

src/app/materials/amap/amap.component.ts

Implements

OnInit

Metadata

selector app-amap
styleUrls ./amap.component.scss
templateUrl ./amap.component.html

Index

Properties
Methods

Constructor

constructor()
Defined in src/app/materials/amap/amap.component.ts:13

Methods

ngOnInit
ngOnInit()
Defined in src/app/materials/amap/amap.component.ts:17
Returns : void
view
view()
Defined in src/app/materials/amap/amap.component.ts:20
Returns : void

Properties

isView
Type : boolean
Default value : false
Defined in src/app/materials/amap/amap.component.ts:13
lat
Type : number
Default value : 121.47
Defined in src/app/materials/amap/amap.component.ts:10
lng
Type : number
Default value : 31.23
Defined in src/app/materials/amap/amap.component.ts:11
 
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-amap',
  templateUrl: './amap.component.html',
  styleUrls: ['./amap.component.scss']
})
export class AmapComponent implements OnInit {

  lat: number = 121.47;
  lng: number = 31.23;

  isView: boolean = false;

  constructor() { }

  ngOnInit() {
  }

  view() {
    this.isView = true;
  }

}
Copy
<mat-card>
  <mat-card-title>高德地图</mat-card-title>
  <mat-card-content>
    <stbui-amap></stbui-amap>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>指定经纬度</mat-card-title>
  <mat-card-content>
    <mat-form-field>
      <input matInput placeholder="经度" [(ngModel)]="lat">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="纬度" [(ngModel)]="lng">
    </mat-form-field>

    <button mat-raised-button color="primary" (click)="view()">查看</button>

    <stbui-amap *ngIf="isView" [lat]="lat" [lng]="lng"></stbui-amap>
  </mat-card-content>
</mat-card>
Copy

./amap.component.scss 

:host {
  display: block;
}

mat-card {
  margin: 20px;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""