如何在Angular 10+；

以下代码受此官方文档的启发，在我的Angular 10应用程序中运行良好：

import{AfterViewInit，ChangeDetectionStrategy，Component，ElementRef，ViewChild}来自“@angular/core”
从'@shared/models/Coordinates.model'导入{Coordinates}；
从“@googlemaps/markerclustereplus”导入MarkerClusterer
@组成部分({
选择器：“存储映射”，
模板：``，
样式URL:['./store map.component.scss']，
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类StoreMapComponent实现AfterViewInit{
@ViewChild（'map'，{static:false}）信息：ElementRef；
ngAfterViewInit（）{
常数位置=[
{拉丁美洲：-31.56391，液化天然气：147.154312}，
{拉脱维亚：-33.718234，液化天然气：150.363181}，
{拉丁美洲：-33.727111，液化天然气：150.371124}，
{拉丁美洲：-33.848588，液化天然气：151.209834}，
{拉丁美洲：-33.851702，液化天然气：151.216968}，
{拉丁美洲：-34.671264，液化天然气：150.863657}，
{拉丁美洲：-35.304724，液化天然气：148.662905}，
{拉丁美洲：-36.817685，液化天然气：175.699196}，
{拉丁美洲：-36.828611，液化天然气：175.790222}，
{拉丁美洲：-37.75，液化天然气：145.116667}，
{拉丁美洲：-37.759859，液化天然气：145.128708}，
{拉丁美洲：-37.765015，液化天然气：145.133858}，
{拉丁美洲：-37.770104，液化天然气：145.143299}，
{拉丁美洲：-37.7737，液化天然气：145.145187}，
{拉丁美洲：-37.774785，液化天然气：145.137978}，
{lat:-37.819616，lng:144.968119}，
{拉丁美洲：-38.330766，液化天然气：144.695692}，
{拉丁美洲：-39.927193，液化天然气：175.053218}，
{拉丁美洲：-41.330162，液化天然气：174.865694}，
{拉丁美洲：-42.734358，液化天然气：147.439506}，
{拉丁美洲：-42.734358，液化天然气：147.501315}，
{lat:-42.735258，lng:147.438}，
{lat:-43.999792，lng:170.463352}，
];
const map=new google.maps.map（document.getElementById（“map”）作为HTMLElement{
缩放：3，
中心：{lat:-28.024，lng:140.887}，
}
)
const labels=“abcdefghijklmnopqrstuvxyz”；
常量标记=位置。地图（（位置，i）=>{
返回新的google.maps.Marker({
位置:位置,，
标签：标签[i%labels.length]，
});
});
新标记聚类器（地图、标记、{
图像路径：
"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
});
}
}

标记聚类在这里工作得很好。不幸的是，这不是一个真正的“角度的方式”来实现我想要的。我想要的是使用Angular的“新”原生Google地图组件。下面是我所做的（没有标记聚类）：

组成部分：

@组件({
选择器：“存储映射”，
templateUrl:'./store map.component.html'，
样式URL:['./store map.component.scss']，
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类StoreMapComponent{
@输入（）
坐标：坐标
@输入（）
缩放：数字
@输入（）
设置存储（值：存储[]）{
//在显示标记之前，为地图留出加载时间
if（this.isFirstLoad&&value.length>0）{
this.isFirstLoad=false
设置超时（（）=>{
这个。_存储=值
this.changeDetector.markForCheck（）//由于setTimeout（）而需要
}, 1000)
}否则{
这个。_存储=值
}
}
private isFirstLoad=true
_门店：门店[]=[]
markerOptions:google.maps.markerOptions={
动画：animation.DROP，
图标：{
url:“/assets/img/warn.png”，
大小：新google.maps.size（32,32）
}
}
构造函数（私有changeDetector:ChangeDetectorRef）{}
getStoreLatLngLiteral（store:store）：google.maps.LatLngLiteral{
返回此.mapCoordinatesToLatLngLiteral({
纬度：store.lat，
经度：store.lng
})
}
mapCoordinatesToLatLngLiteral（坐标：坐标）：google.maps.LatLngLiteral{
返回{
纬度：坐标，纬度，
lng：坐标。经度
}
}

模板：

---

问题是，在这一点上，我不知道如何以“角度”的方式设置标记群集。

使用Angular的Google Maps包（

@Angular/Google Maps

），您可以以与上面示例类似的方式使用标记群集

组件。ts

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

@Component({
  selector: 'google-map-demo',
  templateUrl: 'google-map-demo.html',
})
export class GoogleMapDemo {
  center: google.maps.LatLngLiteral = {lat: 24, lng: 12};
  zoom = 4;
  markerPositions: google.maps.LatLngLiteral[] = [];
  markerClustererImagePath =
      'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m';

  addMarker(event: google.maps.MouseEvent) {
    this.markerPositions.push(event.latLng.toJSON());
  }
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.map {
  height:100%;
}

import { Component, OnInit, ViewChild } from "@angular/core";
declare const google: any;

@Component({
  selector: "my-maps",
  templateUrl: "./map-with-marker.component.html",
  styleUrls: ["./map-with-marker.component.css"]
})
export class MapComponent implements OnInit {
  @ViewChild("map", { static: true }) mapElement: any;
  map: any;

  constructor() {}

  ngOnInit() {
    const locations = [
      { lat: -31.56391, lng: 147.154312 },
      { lat: -33.718234, lng: 150.363181 },
      { lat: -33.727111, lng: 150.371124 },
      { lat: -33.848588, lng: 151.209834 },
      { lat: -33.851702, lng: 151.216968 },
      { lat: -34.671264, lng: 150.863657 },
      { lat: -35.304724, lng: 148.662905 },
      { lat: -36.817685, lng: 175.699196 },
      { lat: -36.828611, lng: 175.790222 },
      { lat: -37.75, lng: 145.116667 },
      { lat: -37.759859, lng: 145.128708 },
      { lat: -37.765015, lng: 145.133858 },
      { lat: -37.770104, lng: 145.143299 },
      { lat: -37.7737, lng: 145.145187 },
      { lat: -37.774785, lng: 145.137978 },
      { lat: -37.819616, lng: 144.968119 },
      { lat: -38.330766, lng: 144.695692 },
      { lat: -39.927193, lng: 175.053218 },
      { lat: -41.330162, lng: 174.865694 },
      { lat: -42.734358, lng: 147.439506 },
      { lat: -42.734358, lng: 147.501315 },
      { lat: -42.735258, lng: 147.438 },
      { lat: -43.999792, lng: 170.463352 }
    ];

    const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var center = { lat: -33.8569, lng: 151.2152 };
    const mapProperties = {
      center: center,
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(
      this.mapElement.nativeElement,
      mapProperties
    );

    this.addMarker(locations, labels);
  }
  addMarker(locations, labels) {
    const markers = locations.map((location, i) => {
      return new google.maps.Marker({
        position: location,
        label: labels[i % labels.length],
        map: this.map
      });
    });
    new MarkerClusterer(this.map, markers, {
      imagePath:
        "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
    });
  }
}

component.html

<google-map height="400px"
            width="750px"
            [center]="center"
            [zoom]="zoom"
            (mapClick)="addMarker($event)">
  <map-marker-clusterer [imagePath]="markerClustererImagePath">
    <map-marker *ngFor="let markerPosition of markerPositions"
                [position]="markerPosition"></map-marker>
  </map-marker-clusterer>
</google-map>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
<my-app>loading</my-app>

<div #map class="map"></div>

指向其文档的完整链接以及如何加载库

---

这将在11.1.0版（as）中推出，或者您可以下载。

如果您想使用官方文档，您可以直接将JS脚本加载到index.html文件中，而不是依赖具有自己文档的第三方模块/包

以下是一个样本供您参考：

index.html

<google-map height="400px"
            width="750px"
            [center]="center"
            [zoom]="zoom"
            (mapClick)="addMarker($event)">
  <map-marker-clusterer [imagePath]="markerClustererImagePath">
    <map-marker *ngFor="let markerPosition of markerPositions"
                [position]="markerPosition"></map-marker>
  </map-marker-clusterer>
</google-map>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
<my-app>loading</my-app>

<div #map class="map"></div>

使用marker.component.html映射

<google-map height="400px"
            width="750px"
            [center]="center"
            [zoom]="zoom"
            (mapClick)="addMarker($event)">
  <map-marker-clusterer [imagePath]="markerClustererImagePath">
    <map-marker *ngFor="let markerPosition of markerPositions"
                [position]="markerPosition"></map-marker>
  </map-marker-clusterer>
</google-map>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
<my-app>loading</my-app>

<div #map class="map"></div>

如果遇到

google未定义

，只需在代码的任何部分（即.ts文件）上留一个空格，因为Stackblitz似乎有问题

---

有什么方法可以让它工作吗，比如导入一个模块或什么的？因为Angular告诉我，

'map-marker-cluster'不是一个已知的元素-maps@10.2.7

@Flobesst您是否按照我上面提到的链接，按照建议通过

或通过加载库de>@googlemaps/markerclustererplus是的，我在我的

index.html

中添加了脚本，但仍然有相同的错误消息。看起来它还没有作为V11.1.0中Angular软件包的一部分推出。更新了相关链接和下载的答案。哦，好的，所以我必须更新到Angular的最新版本。我告诉你。正如我所说的在我的第一篇文章中，当我直接使用JS脚本时，markers集群工作得很好。但是我想用Angular的组件和指令以“Angular的方式”完成它。