【发布时间】:2017-12-15 14:37:10
【问题描述】:
我想用标记填充 Google 地图。
我得到的标记坐标为字符串:
"marker": {
"latitude": "52.31976",
"longitude": "7.00454"
}
我的 JSON 检索服务:
/**
* Get All Sources
*/
getSources(): Observable<Source.RootObject[]> {
return this._http.get(this._sourceUrl)
.map((response: Response) => <Source.RootObject[]>response.json());
}
我的组件处理调用:
/**
* Set local _sources array equal data from stream
* @param _sourceService
* @param router
*/
constructor(
private _sourceService: SourceService,
private router: Router
) {
this._sourceService.getSources()
.subscribe(_sources => this.createSources(_sources));
}
createMArkers 方法:
/**
* Bad workaround for markers
*/
private createSources(result): void {
this._sources = result;
let sourceLat: number, sourceLng: number;
this.positions = [];
let latlong = null;
for (let i = 0; i < this._sources.length; i++) {
sourceLat = +this._sources[i].marker.latitude;
sourceLng = +this._sources[i].marker.longitude;
// Create position object
latlong = { lat: sourceLat, lng: sourceLng };
this.positions.push([this._sources[i].id, latlong]);
}
}
Angular 的 HTML 标记:
<ngui-map zoom="8" center="{{center}}" >
<marker *ngFor="let pos of positions"
[icon]="{
url: 'assets/icons/marker.svg',
anchor: [16,16],
size: [32,32],
scaledSize: [32,32]
}"
(click)="printLog(pos)"
[position]="pos.latlong"></marker>
</ngui-map>
我不想为位置创建单独的数组,而只是使用源对象数组(例如 source.marker.longitude)
我尝试了什么:
-
[position]="marker.latitude, marker.longitude"不被接受,因为它是一个字符串值。 -
[position]=marker.latitude, marker.longitude,希望它会被投射。 [position]={{marker}}
提前致谢。
【问题讨论】:
-
@toskv 在 component.ts 中使用 TypeScript,但是如何使用 Angular 解决这个问题?
-
您可以在处理来自服务器的响应的同时使用 javascript 进行转换。
-
你能给我指出正确的方向吗?
-
parseFloat/parseInt,或者对它做一个数字运算……(但你必须分别对待每个数字)
标签: html angular typescript google-maps-api-3