@angular/component - google-map 添加控件 - 自定义组件 - 切换显示流量

Question

我对 angular 很陌生，但我正在尝试将自定义组件添加到谷歌地图组件。 该组件是一个切换按钮，将显示谷歌地图的交通 map 覆盖。 它自己工作的切换按钮，但我找不到将其添加到谷歌地图叠加层的方法。 在过去，可以将自定义控件添加到谷歌地图。

过去如何完成的链接： http://pietervogelaar.nl/google-maps-api-v3-traffic-toggle-button

此链接对于查找与 angular 的新 google-maps 组件相关的更多信息非常有帮助，它提到了控件： https://timdeschryver.dev/blog/google-maps-as-an-angular-component

我尝试遵循 angular 的过去解决方案，但这些似乎不起作用。 像这个例子： 在谷歌地图Angular2中添加按钮

将控件/自定义组件添加到谷歌地图我做错了什么？

按钮位于底部：我的工作结果

但我的目标是在这里得到它：目标控制 position

这是公共 github 存储库的链接，用于测试代码： https://github.com/default-kaas/public-googlemapsdemo/tree/main/src

map 的代码

app.component.ts：

import { OnInit, ViewChild } from '@angular/core';
import { Component } from '@angular/core';
import { MapInfoWindow, MapMarker, GoogleMap } from '@angular/google-maps';
import { fromEventPattern } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
  @ViewChild(GoogleMap, { static: false }) map?: GoogleMap
  @ViewChild('app-toggle-button') input?: any; 

  setControlPosition() {
    console.log("Input found");
    console.log(this.input);

    if (this.map && this.input)
      this.map?.controls[google.maps.ControlPosition.TOP_RIGHT].push(this.input);
  }

  traficViewActive = false
  toggleMessage = "Verkeer"
  zoom = 8
  maxZoom = 20
  minZoom = 2
  center: google.maps.LatLngLiteral
  options: google.maps.MapOptions = {
    mapTypeId: 'roadmap',
    zoomControl: true,
    scrollwheel: true,
    disableDoubleClickZoom: true,
    maxZoom: this.maxZoom,
    minZoom: this.minZoom,
    zoomControlOptions: {
      position: google.maps.ControlPosition.RIGHT_TOP,
    },
    mapTypeControl: true,
    mapTypeControlOptions: {
      position: google.maps.ControlPosition.RIGHT_BOTTOM,
    },
    streetViewControl: false,

  }
  constructor() {
    this.center = { lat: 52.0907, lng: 5.1214 }
    navigator.geolocation.getCurrentPosition((position) => {
      this.center = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      }
    })
    this.setControlPosition()
  }

  ngOnInit() {
    navigator.geolocation.getCurrentPosition((position) => {
      this.center = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      }
    })
    this.setControlPosition()
  }

  zoomIn() {
    if (this.zoom < this.maxZoom) this.zoom++
  }

  zoomOut() {
    if (this.zoom > this.minZoom) this.zoom--
  }

  onMapReady(mapInstance: google.maps.Map) {
    let trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(mapInstance);
  }

  receiveToggle($event: any) {
    this.traficViewActive = $event
  }
}

app.component.html

<google-map height="900px" width="40%" [zoom]="zoom" [center]="center" [options]="options">
    <ng-template [ngIf]="traficViewActive">
        <map-traffic-layer [autoRefresh]="true"></map-traffic-layer>
    </ng-template>
    <app-toggle-button id="app-toggle-button" [active]="traficViewActive" [text]="toggleMessage"
        (toggleEvent)="receiveToggle($event)"></app-toggle-button>
</google-map>

<router-outlet></router-outlet>

切换按钮的部分

切换按钮.component.html：

<div class="check-box-wrapper">
<input id="chck" [checked]="active" type="checkbox" (click)="toggle()">
<label for="chck" class="check-trail">
  <span class="check-handler"></span>
</label>
<label>{{text}}</label>
</div>

切换按钮.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-toggle-button',
  templateUrl: './toggle-button.component.html',
  styleUrls: ['./toggle-button.component.scss']
})
export class ToggleButtonComponent implements OnInit {
 @Input() active: boolean;
 @Input('text') text: string;
 @Output() toggleEvent = new EventEmitter<boolean>();

  constructor() { 
    this.active = false
    this.text = ""
  }

  ngOnInit(): void {
  }

  toggle(){
    console.log("toggle");
    this.active =! this.active
    this.toggleEvent.emit(this.active);
  }
}

切换按钮.component.scss

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ecf0f1;
  height: 100vh;
}

/* Hide the input */
input[type=checkbox] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.check-trail {
  display: flex;
  align-items: center;
  width: 3.375em;
  height: 1.875em;
  background: #2c3e50;
  border-radius: 2.5em;
  transition: all 0.5s ease;
  cursor: pointer;
}

.check-handler {
  display: flex;
  margin-left: 0.25em;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  background: #34495e;
  border-radius: 50%;
  transition: all 0.5s ease;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.check-handler:before {
  content: "";
  color: white;
  font-size: 2em;
  font-weight: bold;
}

input[type=checkbox]:checked + .check-trail {
  background: #6ECFF6; 
}
input[type=checkbox]:checked + .check-trail .check-handler {
  margin-left: 50%;
  background: #B9E5FB; 
}
input[type=checkbox]:checked + .check-trail .check-handler::before {
  content: "";
}

.check-box-wrapper{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 40px;
    width: 100px;
}