如何使用Angular2-Google-Maps将Google地图设置为2d

时间:2017-06-14 12:44:27

标签: angular google-maps angular2-google-maps

我已经使用Angular 4安装了Angular Google Maps。

模板很简单:

<agm-map [latitude]="58.150587" [longitude]="7.978571" [zoom]="19" [mapTypeId]="'satellite'"></agm-map>

我得到的是一个不错的3D版本:Like this

我希望它成为卫星视图。但我不想要3d效果。我希望它是平的,2d,Like this

有人能帮助我吗?

1 个答案:

答案 0 :(得分:1)

我在我的一个应用程序中使用了这个模块,显示的地图是2d。与您的代码唯一不同的是我没有的[mapTypeId]:

<div class="map">
    <agm-map [latitude]="lat" [longitude]="lng" [zoom]="17">
        <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
    </agm-map>
</div>

[maptypeId]属性有4个值:

路线图,这是您想要的(如果未提供属性,则默认为路线图)

卫星,这是一个谷歌地球代表

混合+地形,但我从未使用过这些。

要获得二维表示,请删除该属性或将其值更改为[mapTypeId] =&#34;&#39;路线图&#39;&#34;

编辑:留下以前的答案,因为它可能对其他人有帮助,但针对您的确切问题的解决方案如下:

您需要在agm-map标记

上添加mapReady事件
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="17" [mapTypeId]="'hybrid'" (mapReady)="changeTilt($event)">

Google地图完全初始化后会触发此事件。它会返回你的google.maps.Map实例。您需要创建一个私有属性才能存储它。

private _map: any;

然后你可以改变属性并使用你想要的方法:

changeTilt(map) {
    this._map = map;
    this._map.setTilt(0);
}

我非常感谢cholexa对这个解决方案的巨大帮助(在angular2-google-map gitter chat上)