Как добавить метку к каждому маркеру angular карты Google - Angular 2

Я использую Angular 2 для своего проекта. Я хотел бы знать, как добавить метку к маркеру с помощью угловых карт Google. Я не получаю решения для добавления метки с помощью Angular 2. Ниже мой html-код. Я получаю места с помощью ngFor. Мне нужно пометить объект имени маркером. Обычно, когда я наводю курсор на маркер, он должен показывать это имя.

    <div class = "form-group">
        <input placeholder = "search for location" autocorrect = "off" autocapitalize = "off" 
        spellcheck = "off" type = "text" class = "form-control" #search [formControl] = "searchControl">
      </div>
    <agm-map style = "height: 600px" [latitude] = "latitude" [longitude] = "longitude">
        <agm-marker  *ngFor = "let m of mapArrayList; let i = index" 
          [latitude] = "m.latitude"
          [longitude] = "m.longitude"
          label = "m"
          (markerClick) = "clickedMarker(m.id)"
         >

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


mapArrayList:
0:
    address: XYZ
    name: ABC services Lts


ngOnInit() {
    this.latitude = 1.372611;
    this.longitude = 103.848076;
    this.mapArrayList = this.facilityListArray;
    console.info(this.mapArrayList);
     // set google maps defaults
     this.zoom = 40;

     // create search FormControl
     this.searchControl = new FormControl();

     // set current position
     this.setCurrentPosition();

     // load Places Autocomplete
    this.mapsAPILoader.load().then(() => {
      const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
        componentRestrictions: {country: ['SG', 'IN']}
      });
      autocomplete.addListener('place_changed', () => {
        this.ngZone.run(() => {
          // get the place result
          const place: google.maps.places.PlaceResult = autocomplete.getPlace();

          // verify result
          if (place.geometry === undefined || place.geometry === null) {
            window.alert('No details available for input: \'' + place.name + '\'');
            return;
          }

          // set latitude, longitude and zoom
          this.latitude = place.geometry.location.lat();
          this.longitude = place.geometry.location.lng();
          this.zoom = 100;
        });
      });
    });
  }
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
2 177
1

Ответы 1

Вы можете предоставить такой ярлык ...

<agm-map style = "height: 600px" [latitude] = "latitude" [longitude] = "longitude">
        <agm-marker  *ngFor = "let m of mapArrayList; let i = index" 
          [latitude] = "m.latitude"
          [longitude] = "m.longitude"
          [label] = "m.label"
          (markerClick) = "clickedMarker(m.id)"
         >

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

Где переменная m.label имеет строковое значение - обычно один символ в верхнем регистре. (хотя вы можете использовать любое строковое значение)

Вместо строкового значения вы также можете использовать значение типа MarkerLabel для предоставления более подробной информации, если вам это нравится. Ниже представлена ​​структура интерфейса MarkerLabel.

interface MarkerLabel {
  color: string;
  fontFamily: string;
  fontSize: string;
  fontWeight: string;
  text: string;
}

@Nancy - Помогает ли это в решении вашей проблемы?

vsoni 27.06.2018 11:56

Другие вопросы по теме