Angular 4 谷歌地图完全控制和缩放控制位置和样式答案

【问题标题】：Angular 4 google map Full Control and Zoom Control positions and stylingAngular 4 谷歌地图完全控制和缩放控制位置和样式
【发布时间】：2017-10-22 11:15:27
【问题描述】：

我正在为我的 Angular 4 应用程序使用 AGM - Angular Google Maps。我已将控制选项设置为文档。但他们没有工作。我的代码如下。 HTML

[latitude]="lat" 
[longitude]="lng" 
[zoom]="zoom" 
[styles] = "styles"
[disableDefaultUI]="true"
[zoomControl]="true"
[scaleControl]="true"
[scaleControlOptions]="scaleControlOptions"
[zoomControlOptions]="zoomControlOptions"
[fullscreenControl]="true"
[fullscreenControlOptions]="fullscreenControlOptions"
[streetViewControl]="'false'"
[mapTypeControl]="'true'"
[mapTypeControlOptions]="mapTypeControlOptions"

Ts 上的属性

lat = 40;
lng = 40;
zoom = 2;

zoomControlOptions: ZoomControlOptions = {
    position: ControlPosition.LEFT_BOTTOM,
    style: ZoomControlStyle.LARGE
  };

 fullscreenControlOptions: FullscreenControlOptions = {
    position : ControlPosition.LEFT_BOTTOM
  };

  mapTypeControlOptions: MapTypeControlOptions = {
    mapTypeIds: [ MapTypeId.ROADMAP],
    position: ControlPosition.BOTTOM_LEFT,
  };

从https://mapstyle.withgoogle.com/ 复制的样式 json。我需要完全控制和缩放控制左下角的自定义样式如下..

【问题讨论】：

标签： angular google-maps angular-google-maps

【解决方案1】：

您应该使用 mapReady 事件和 SetOptions 方法。

<agm-map
    ...
    (mapReady)="onMapReady($event)">

    onMapReady(map) {
        map.setOptions({
            zoomControl: 'true',
            zoomControlOptions: {
                position: google.maps.ControlPosition.RIGHT_CENTER,
                style: google.maps.ZoomControlStyle.DEFAULT
            }
        });
    }

解决方法如下： https://github.com/SebastianM/angular-google-maps/issues/1308

【讨论】：