Angular14.1+AGM实现谷歌地图官方样式图层控件求助

1. 修复地图类型控件样式问题 #

你的代码中设置了[disableDefaultUI]="true"，这会完全禁用谷歌地图的默认UI组件样式，导致地图类型控件无法显示官方风格。同时mapTypeControlOptions中的style:2对应下拉菜单样式，和谷歌地图当前默认的横向栏样式不符。

修改方案： #

• 调整disableDefaultUI配置，不要完全禁用，或者明确保留需要的UI组件
• 修正mapTypeControlOptions的样式参数，使用官方默认的横向样式

组件TS代码修改：

import { MapTypeControlStyle, ControlPosition } from '@agm/core/services/google-maps-types';

public mapTypeControlOptions: google.maps.MapTypeControlOptions = {
  position: ControlPosition.LEFT_BOTTOM,
  // 使用谷歌官方默认的横向栏样式（对应MapTypeControlStyle.HORIZONTAL_BAR，值为1）
  style: MapTypeControlStyle.HORIZONTAL_BAR,
  mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain'],
};

HTML代码修改：

把[disableDefaultUI]="true"替换为保留官方UI基础样式的配置，同时隐藏不需要的默认控件：

<agm-map
    [latitude]="latitude"
    [longitude]="longitude"
    [zoomControl]="true"
    [mapTypeControlOptions]="mapTypeControlOptions"
    [mapTypeControl]="true"
    [zoom]="zoom" 
    <!-- 保留官方UI基础样式，不全部禁用 -->
    [disableDefaultUI]="false"
    <!-- 隐藏不需要的默认控件 -->
    [streetViewControl]="false"
    [fullscreenControl]="false"
    class="map"
>

2. 添加路况图层切换功能 #

要实现路况视图切换，AGM提供了agm-traffic-layer组件，可通过布尔值控制其显示/隐藏，搭配切换按钮即可完成需求。

步骤： #

1. 在组件TS中添加控制变量：

// 控制路况图层是否显示
public showTrafficLayer = false;

2. 修改HTML，添加切换按钮和图层组件：

<dx-popup
    *ngIf="showMapPopUpVisible"
    [(visible)]="showMapPopUpVisible"
    [width]="800"
    [height]="'auto'"
    [maxHeight]="600"
    [fullScreen]="appContext.isMobileMode"
    [hideOnOutsideClick]="true"
    [showCloseButton]="true"
    [title]="resKeys.strOrderShowAddressesOnMap | translate"
>
    <!-- 路况切换按钮 -->
    <div class="map-controls">
        <button (click)="showTrafficLayer = !showTrafficLayer" class="traffic-btn">
            {{ showTrafficLayer ? '隐藏路况' : '显示路况' }}
        </button>
    </div>

    <agm-map
        <!-- 保持之前的配置 -->
        [latitude]="latitude"
        [longitude]="longitude"
        [zoomControl]="true"
        [mapTypeControlOptions]="mapTypeControlOptions"
        [mapTypeControl]="true"
        [zoom]="zoom" 
        [disableDefaultUI]="false"
        [streetViewControl]="false"
        [fullscreenControl]="false"
        class="map"
    >
        <!-- 路况图层组件 -->
        <agm-traffic-layer *ngIf="showTrafficLayer"></agm-traffic-layer>

        <!-- 标记点和信息窗口 -->
        <agm-marker 
            *ngFor="let marker of markers" 
            [latitude]="marker.position.lat()" 
            [longitude]="marker.position.lng()"
        >
            <agm-info-window [disableAutoPan]="true">
                <div class="marker-text-container">
                    <ng-container *ngFor="let item of marker.text; let i = index;">
                        {{ marker.title[0] }}
                        <br />
                        <span class="small">{{ item }}</span>
                        <hr *ngIf="i < marker.text.length - 1" class="marker-separator"/>
                    </ng-container>
                </div>
            </agm-info-window>
        </agm-marker>
    </agm-map>
</dx-popup>

3. 添加基础样式（可选）：

给切换按钮添加贴合谷歌地图风格的样式：

.map-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

.traffic-btn {
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.traffic-btn:hover {
    background: #f5f5f5;
}

关键说明 #

• disableDefaultUI="true"是控件样式丢失的核心原因，谷歌地图官方控件样式依赖默认UI框架，完全禁用会回退到基础样式
• AGM的MapTypeControlStyle枚举对应谷歌地图原生控件样式，HORIZONTAL_BAR（值1）是当前网页版谷歌地图的默认样式
• 路况图层agm-traffic-layer直接绑定谷歌地图原生TrafficLayer服务，切换逻辑简单直观

内容的提问来源于stack exchange，提问作者ddxkalin