如何为每个标记角度Google地图添加标签-Angular 2 [英] How to add label to each marker angular google maps - Angular 2

问题描述

我正在将Angular 2用于我的项目.我想知道如何使用角度Google地图向标签添加标签.我没有使用Angular 2添加标签的解决方案. 下面是我的html代码.我正在使用ngFor检索这些地方.我需要将名称对象标记到marker上.基本上，当我将鼠标悬停在标记上时，它应该显示该名称

I am using Angular 2 for my project . I would like to know how to add label to the marker using angular google maps. I am not getting a solution to add a label using Angular 2. Below is my html code . I am retrieving the places using ngFor . I need to tag the name object to the marker . Basically , when i hover on a marker , it should show that name

    <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.log(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;
        });
      });
    });
  }

推荐答案

您可以提供这样的标签...

You can provide the label like this ...

<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具有字符串值-通常是一个大写字符. (尽管您可以使用任何字符串值)

Where variable m.label has a string value - usually a single uppercase character. (though you can use any string value)

如果您愿意，也可以使用类型为MarkerLabel的值代替字符串值，以提供更详细的信息.以下是MarkerLabel界面的结构.

In place of string value you can also use value of type MarkerLabel for providing more detailed info if you like that. Following is the structure of the MarkerLabel interface.

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

这篇关于如何为每个标记角度Google地图添加标签-Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！