angular - 如何在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>

打字稿

export class ContactusComponent implements OnInit {

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

  constructor() { }

  ngOnInit() {
  }

}

谁能帮我得到这个..

Answer 1

您将需要使用[mapTypeId]. 例如：

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

选项是：

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

默认为'roadmap'.

Answer 2

如果您想同时使用这两个视图。您只需将 [mapTypeControl]='true' 添加到 agm-map 标记即可。Ex- <agm-map [zoom]='11' [latitude]="lat" [longitude]="lng" [fullscreenControl]='true' [mapTypeControl]='true'>

Answer 3

最后我找到了答案。

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

必须为不同的视图选项写，它在地图上显示（卫星，terrsin 和其他）

Answer 4

在 agm 地图控件中添加按钮，用于切换不同的地图类型。

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [disableDefaultUI]="false"
                        style="width:100%;height:400px" >
                        <agm-map-type-control>
                            <button mat-flat-button >Satellite</button>
                            <button mat-flat-button >RoadMap</button>

                        </agm-map-type-control></agm-map>

Answer 5

也许它会解决你的问题。添加 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;
 }

根据您需要的视图添加额外的按钮。