如何在Angular 4中从街道地图切换到卫星地图

我在Angular 4应用程序中工作，这里我想添加一个地图视图，因为默认情况下，我使用街景开发了地图

现在我想给用户添加一个选项，让他们能够在街景和卫星景之间切换

HTML

---

谁能帮我弄到这个..

你需要使用

[mapTypeId]

。例如：

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

---

默认设置为

'roadmap'

您需要使用

[mapTypeId]

。例如：

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

---

如果您想同时使用这两个视图，则默认为

'roadmap'

。您可以简单地将[mapTypeControl]='true'添加到agm地图标签。

Ex-

如果您想同时使用这两个视图。您可以简单地将[mapTypeControl]='true'添加到agm地图标签。

Ex-

可能会解决您的问题。加载项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>

---

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

可能会解决您的问题。加载项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>

---

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

我终于找到了答案

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

---

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

我终于找到了答案

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

---

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

在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>

卫星
路线图

在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>

卫星
路线图

@vscherbinin我知道有这些选项，但我想在屏幕上有一个选项，用户可以在卫星视图和默认视图之间切换。@vscherbinin我知道有这些选项，但我想在屏幕上有一个选项，用户可以在卫星视图和默认视图之间切换。