Agm google 地图 - 如何将纬度和经度绑定到 HTML
Agm google maps - how to bind latitude and longitude to HTML
我在绑定从 AJAX 响应中获得的纬度和经度参数时遇到问题。如果我在 HTML 中硬编码纬度和经度,它工作正常。但是当我从响应中传递数据时,它就不起作用了。
<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
}
}
很可能是因为提供了 string
类型的值。
AgmMarker
需要 latitude
和 longitude
类型的 number
值,例如:
map.component.html:
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
map.component.ts:
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供大家参考
我在绑定从 AJAX 响应中获得的纬度和经度参数时遇到问题。如果我在 HTML 中硬编码纬度和经度,它工作正常。但是当我从响应中传递数据时,它就不起作用了。
<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
}
}
很可能是因为提供了 string
类型的值。
AgmMarker
需要 latitude
和 longitude
类型的 number
值,例如:
map.component.html:
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
map.component.ts:
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供大家参考