Как переключиться с карты улиц на спутниковую карту в Angular 4

Question

Я работаю в приложении Angular 4, здесь я хотел бы добавить вид карты, для которой я по умолчанию разработал карту с видом улиц.

Теперь я хочу добавить пользователю опцию, чтобы он мог переключаться между просмотром улиц и спутниковым просмотром.

HTML

<div class="container">
  <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
    <agm-marker [latitude]="lat" [longitude]="lng">
        <agm-info-window>
            <strong>XYZ Company</strong>
          </agm-info-window>
    </agm-marker>
  </agm-map>
</div>

TypeScript

export class ContactusComponent implements OnInit {

  lat: number = 51.509865;
  lng: number = 77.423994;
  zoom: number = 15;

  constructor() { }

  ngOnInit() {
  }

}

Может кто-нибудь помочь мне получить это ..

Answer 1

Наконец-то я нашел ответ.

 <agm-map  [mapTypeId]="'true'"></agm-map>

надо написать для другого варианта просмотра

Answer 2

Если вы хотите использовать оба вида. Вы можете просто добавить [mapTypeControl] = 'true' в тег agm-map. Ex- <agm-map [zoom]='11' [latitude]="lat" [longitude]="lng" [fullscreenControl]='true' [mapTypeControl]='true'>

Answer 3

Может быть, это решит вашу проблему. Добавить в HTML-файл:

<div>
  <button  class="btn btn-primary" (click) ="this.viewType= 'terrain'" >Terrain</button>
  <button  class="btn btn-danger" (click) ="this.viewType= 'satellite'" >Satellite</button>
  <agm-map [latitude]="lat" [longitude]="lng" [mapTypeId]="this.viewType" >
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
  </agm-map>
</div>

и добавьте COMPONENT.TS ФАЙЛ:

 {
 viewType: any='hybrid';  //for default 'hybrid'

  lat: number = 28.6330;
  lng: number = 77.2194;
 }

добавить дополнительную кнопку в соответствии с требуемым видом.

Answer 4

Вам нужно будет использовать [mapTypeId].Например:

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [mapTypeId]="'hybrid'"></agm-map>. 

Возможны следующие варианты:

'roadmap' | 'hybrid' | 'satellite' | 'terrain'

По умолчанию 'roadmap'.