Блог

Я видел подобные вопросы, но на данный момент в своем угловом путешествии я не обладаю достаточным пониманием, чтобы правильно реализовать их ответы.

Я хочу, чтобы пользователи могли добавлять маркер на карту. Я использую agm-карту.

Я видел, что это решение в документе google api:

 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-картой. В agm-карте я попытался найти что-то подобное и посмотрел директиву 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>
 

Не мог бы кто-нибудь, пожалуйста, помочь мне собрать все воедино?