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

您需要使用[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

也许可以解决您的问题。添加HTML文件：

new Date(dateFromServer).toLocaleDateString()

并添加<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

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

Answer 4

最后我找到了答案。

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

必须为其他视图选项编写

Answer 5

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

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

5 个答案: