angular - 角度 agm-map 如何让用户放置标记

Question

我见过类似的问题，但在我的角度旅程中，我没有足够的理解来正确地实现他们的答案。

我希望用户能够在地图上添加标记。我正在使用 agm-map。

我已经看到这是 google api doc中的解决方案：

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -25.363882, lng: 131.044922 },
    }
  );

  map.addListener("click", (e) => {
    placeMarkerAndPanTo(e.latLng, map);
  });
}

function placeMarkerAndPanTo(latLng: google.maps.LatLng, map: google.maps.Map) {
  new google.maps.Marker({
    position: latLng,
    map: map,
  });
  map.panTo(latLng);
}

但老实说，我不知道如何使用它——具体来说，放在哪里？

我想知道这是否与 agm-map 兼容。在 agm-map 中，我试图找到类似的东西并查看了 AgmMarker 指令。但我不确定如何理解这一切。我的地图代码目前如下所示：

<agm-map id="map" [styles]="aubergine" [zoom]="15" [maxZoom]="25" [minZoom]="12" [disableDefaultUI]="true"
                  style="display:block;" [latitude]="lat" [longitude]="lng">

                  <agm-marker-cluster
                    imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">

                    <agm-marker *ngFor="let m of markers; let i = index" (markerClick)="clickedMarker(m.label, i)"
                      [latitude]="m.lat" [longitude]="m.lng" [label]="m.label" [markerDraggable]="m.draggable"
                      (dragEnd)="markerDragEnd(m, $event)" [iconUrl]="{
                      url: './assets/img/marker.png',
                      scaledSize: {
                          width: 20,
                          height: 20
                      }
                  }">

                      <agm-info-window>
                        <strong>here is some info</strong>
                      </agm-info-window>

                    </agm-marker>
                  </agm-marker-cluster>
                </agm-map>

有人可以帮我把这些碎片放在一起吗？

标签： angulargoogle-maps-api-3google-maps-markersagm-map