代码之家  ›  专栏  ›  技术社区  ›  Nancy

如何为每个标记添加标签角度谷歌地图-角度2

  •  0
  • Nancy  · 技术社区  · 7 年前

    我在我的项目中使用Angular2。我想知道如何添加标签到标记使用角度谷歌地图。我没有得到使用角度2添加标签的解决方案。 下面是我的html代码。我正在用ngfor检索这些地方。我需要将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;
            });
          });
        });
      }
    
    1 回复  |  直到 7 年前
        1
  •  2
  •   vsoni    7 年前

    你可以提供这样的标签…

    <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;
    }