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

Agm谷歌地图-如何将经纬度绑定到HTML

  •  1
  • Nancy  · 技术社区  · 6 年前

      <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
                    <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
                  </agm-map>
    
         ngOnInit() {
            this.getTransactionView(this.selectedTransaction);
          }
    
        getTransactionView(selectedTransaction): void {
    
            const resultArray = {
              'latitude': '51.525244',
              'longtitude': '-0.141186'
            };
            this.transactionResult = resultArray;
            this.latitude = this.transactionResult.latitude;
            this.longitude = this.transactionResult.longtitude;
           console.log(this.latitude);
          console.log(this.longitude);
    // console.log prints the values, but after binding to HTML , it doesnt display the marker
          }
    }
    
    1 回复  |  直到 6 年前
        1
  •  2
  •   Vadim Gremyachev    6 年前

    string 类型。

    AgmMarker 期望 latitude longitude 价值观 number

    map.component.html:

    <agm-map [latitude]="lat" [longitude]="lng">
        <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
    </agm-map>
    

    export class MapComponent implements OnInit {
      lat: number;
      lng: number;
      constructor(private http: HttpClient) {}
    
      ngOnInit() {
        this.initData();
      }
    
    
      initData(): void {
        this.http.get<{}>('./assets/data.json')
        .subscribe(result => {
          console.log(result);
          this.lat = parseFloat(result['lat']);
          this.lng = parseFloat(result['lng']);
        });
      }
    
    }
    

    Here is a demo 供参考