@angular/google-maps 上有关于新 google.maps.marker.AdvancedMarkerElement 的任何新更新吗？

Question

我无法根据新更新 google.maps.marker.AdvancedMarkerElement 导入任何组件以进行标记的新更新。无法在我的角度应用程序中使用组件。它说它不是角度分量的已知元素。

`<ion-content [fullscreen]="true">
    <div id="map">
      <google-map
        height="100%"
        width="100%"
        #map
        dndDropzone
        [center]="center"
        (mapMousemove)="onMouseMove($event)"
        (dndDrop)="onDrop($event)"
        (mapClick)="onMapClick($event)"
      >
        @for (marker of markers; track $index) {
        <map-marker
          [position]="marker.position"
          [icon]="marker.icon!"
          (shapeChanged)="marker.markerShape"
          [draggable]="true"
        ></map-marker>

        }
      </google-map>
    </div>
  </ion-content>`

Answer 1

三周前已经有一个 commit 来实现

@angular/google-maps

的高级标记，该标记将在

17.3

版本上发布。目前可在 预发布版本 17.3 上使用。

要尝试一下，您可以通过在终端中运行以下命令将

@angular/google-maps

更新为 Beta 版本：

ng update @angular/google-maps --next

--next

标志会将您当前的稳定版本更新到下一个/测试版 -

v17.3.0-next.0

。 （截至撰写本文时，稳定版本为

v17.2.1

）

由于高级标记需要地图 ID，因此您应确保使用 地图 ID。

现在您应该使用

<map-marker />

，而不是使用

<map-advanced-marker />

。你的代码应该是这样的：

app.component.html

<google-map 
  height="400px"
  width="750px"
  [center]="center"
  [zoom]="zoom"
  mapId="MAP_ID_HERE"
  >
    @for (position of markerPositions; track position) {
      <map-advanced-marker [position]="position" />
    }
</google-map>

app.component.tsx

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  center: google.maps.LatLngLiteral = { lat: 24, lng: 12 };
  zoom = 4;
  markerOptions: google.maps.MarkerOptions = { draggable: false };
  markerPositions: google.maps.LatLngLiteral[] = [{ lat: 24, lng: 12 }];
}

这是一个概念验证开发盒。 （只需将 MAP_ID 和 API_KEY 更改为您自己的即可）