Angular中解析JSON坐标为数字适配Angular Google Maps

我来帮你搞定这个问题！你现在遇到的是Angular Google Maps不接受字符串类型坐标的问题，而从marker.json读出来的lat和lon刚好是字符串格式，只需要把它们转换成数字类型就能正常使用标记了，具体步骤如下：

首先先确认你的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.component.ts，核心是在获取JSON数据后，把每个标记的坐标字符串转成数字：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

// 定义Marker类型，让TypeScript帮我们做类型校验
interface Marker {
  id: string;
  lat: number;
  lon: number;
}

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

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    // 从assets文件夹读取marker.json文件
    this.http.get<any[]>('./assets/marker.json').subscribe(rawMarkers => {
      // 遍历原始数据，转换坐标类型
      this.markers = rawMarkers.map(marker => ({
        id: marker.id,
        lat: parseFloat(marker.lat), // 用parseFloat把字符串转成数字，也可以用 +marker.lat
        lon: parseFloat(marker.lon)
      }));
    });
  }
}

然后在你的模板文件maps.component.html中，就可以正常使用转换后的数字坐标了（以Angular Google Maps的agm-marker为例）：

<agm-map [latitude]="13.7563" [longitude]="100.5014" [zoom]="12">
  <!-- 遍历转换后的markers数组 -->
  <agm-marker 
    *ngFor="let marker of markers"
    [latitude]="marker.lat"
    [longitude]="marker.lon">
  </agm-marker>
</agm-map>

几个关键注意点： #

• 确保你已经在项目模块（比如AppModule）中导入了HttpClientModule，不然HttpClient没法用
• parseFloat()是比较稳妥的字符串转数字方法，也可以用更简洁的一元加号+marker.lat，效果是一样的
• 定义Marker接口可以避免后续不小心把数字类型的坐标再改成字符串，TypeScript会帮你报错提示

内容的提问来源于stack exchange，提问作者phwt