Question

我想使用Angular Google Maps在Google地图上放置一个标记，我的坐标来自JSON文件，当它在Angular中解析时，它会成为一个字符串。

Angular Google Maps不支持坐标编号的字符串。所以它需要是数字。

marker.json

[  
   {  
      "id":"1",
      "lat":"13.751814",
      "lon":"100.501060"
   },
   {  
      "id":"2",
      "lat":"13.738445",
      "lon":"100.516805"
   },
   {  
      "id":"3",
      "lat":"13.730209",
      "lon":"100.779991"
   }
]

maps.componenet.ts

import { Component, OnInit } from '@angular/core';
import {Http, Response} from '@angular/http';

@Component({
  selector: 'app-maps',
  templateUrl: './maps.component.html',
  styleUrls: ['./maps.component.css']
})
export class MapsComponent implements OnInit {

    private data;

    constructor(private http:Http){
    }

    ngOnInit(){
      this.getData();
    }

    getData(){
        this.http.get('/localhost/marker.json')
            .subscribe(res => this.data = res.json());
    }

}

maps.component.html

<agm-map [latitude]="13.359665" [longitude]="101.035913" [zoom]="6">
    <ng-container *ngFor="let list of data">
        <agm-marker [latitude]="list.lat" [longitude]="list.lon"></agm-marker>
    </ng-container>
</agm-map>

我尝试过像这样使用parseFloat（是的，它没有用）

<agm-marker [latitude]="parseFloat(list.lat)" [longitude]="parseFloat(list.lon)"></agm-marker>

我想在parseInt文件中使用maps.component.ts，但我不确定在哪里放这个。

愿有人帮助我或指导我如何解决这个问题。请告诉我，我是否提供了足够的信息。

谢谢！

Answer 1

更清洁，更高效的方法是处理一次数据，并以不需要任何其他准备工作的方式提供数据：

getData(){
    this.http.get('/localhost/marker.json')
    .map(res => res.json())
    .map((data: any[]) => data.map(
      ({ lon, lat, ...props }) => ({ lon: +lon, lat: +lat, ...props })
    ))
    .subscribe(data => {
      this.data = data;
    });
}

如果marker.json除了列出的道具之外没有其他道具，...props可以用已知的id属性替换。

Answer 2

Angular模板中不允许使用parseFloat等全局函数（请参阅the Angular documentation）。

您可以使用+运算符将字符串转换为数字：

<agm-marker [latitude]="+list.lat" [longitude]="+list.lon"></agm-marker>

或在组件中定义方法：

convertCoordinate(str: string): number {
  return parseFloat(str);
}

并在模板中调用它：

<agm-marker [latitude]="convertCoordinate(list.lat)" [longitude]="convertCoordinate(list.lon)"></agm-marker>

Answer 3

+ lat不会在Angular模板中工作，它的语法无效并且会抛出错误，还有parseFloat或parseInt，在这里你可以解析请求中的JSON，就像@estus指出的那样或者你可以将字符串乘以1：

<agm-marker [latitude]="list.lat * 1" [longitude]="list.lon * 1"></agm-marker>

这会将字符串转换为数字，但请注意，如果它不是数字，则会出现错误而您无法捕获它。

Angular 2+ - 将JSON解析为数字

3 个答案: