如何动态填充符合{lat:值,lng:值}结构的TypeScript数组？

你只是在创建新元素的方式上出了个小问题——当前代码push的是[lat, lng]格式的数组，但目标数组的元素是带有lat和lng属性的对象，调整一下生成新坐标的逻辑就能解决。

最简修正方案 #

直接在polygon方法里创建符合要求的对象，再push到目标数组中：

// 注意：你代码里的`this.number`应该是笔误，改成目标数组`this.numbers1`
polygon(event) {
  // 创建{ lat: ..., lng: ... }结构的对象
  const newCoordinate = {
    lat: event.coords.lat,
    lng: event.coords.lng
  };
  this.numbers1.push(newCoordinate);
}

更规范的TypeScript写法（推荐） #

既然用了TypeScript，建议抛弃any，给数组定义明确的类型，既能获得编辑器的类型提示，也能避免潜在的类型错误：

// 先定义坐标的类型接口
interface Coordinate {
  lat: number;
  lng: number;
}

// 初始化数组时指定类型，替代any
numbers1: Coordinate[] = [
  { lat: 43.477254, lng: -3.780953 },
  { lat: 43.472739, lng: -3.781039 },
  { lat: 43.472498, lng: -3.780164 },
  { lat: 43.472023, lng: -3.780363 }
];

// 在polygon方法中使用定义好的类型
polygon(event) {
  const newPoint: Coordinate = {
    lat: event.coords.lat,
    lng: event.coords.lng
  };
  this.numbers1.push(newPoint);
}

为什么原来的代码不行？ #

你之前的this.list = [event.coords.lat, event.coords.lng]生成的是一个数组，而目标数组numbers1的每个元素都是对象，两者结构不匹配，所以无法得到预期的结果。只要把生成list的逻辑改成创建对象就解决了。

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