Typescript对接Google Maps Geocoding接口如何无需强转生成LatLng实例

解决方案 #

1. 优先复用@types/google.maps内置类型 #

不需要自己单独定义GoogleGeocodingResponse类型，@types/google.maps包中已经提供了和地理编码接口完全匹配的类型定义，你可以直接复用google.maps.GeocoderResult作为单条结果的类型，其中坐标点位对应的字面量结构为google.maps.LatLngLiteral，就是官方定义的{lat: number, lng: number}标准结构，完全符合接口返回的字段格式。

2. 修正类型定义消除强制转换 #

你现在需要手动转Number的核心原因大概率是两个：

• 自定义类型里错误使用了大写的Number（包装对象类型），而不是TS原始的小写number数值类型
• 没有复用官方的标准类型，导致TS无法识别属性的正确类型

修正后的类型定义可以直接写成：

type GoogleGeocodingResponse = {
  results: google.maps.GeocoderResult[]
  status: string
}

如果只需要用到坐标字段，也可以写精简版：

type GoogleGeocodingResponse = {
  results: {
    geometry: {
      location: google.maps.LatLngLiteral
    }
  }[]
  status: string
}

调整类型之后，创建LatLng的代码可以直接简化，不需要任何强制转换：

const coordinates = new google.maps.LatLng(response.data.results[0].geometry.location)

google.maps.LatLng构造函数本身就支持直接传入LatLngLiteral类型作为参数，完全符合语法要求。

3. 更优实现方案：使用官方JS SDK的Geocoder服务 #

如果你已经引入了谷歌地图JS SDK，不需要自己用Axios封装HTTP请求，直接调用SDK自带的google.maps.Geocoder即可，返回的结果里geometry.location本身就是已经实例化完成的LatLng对象，连构造步骤都可以省略：

const geocoder = new google.maps.Geocoder()
geocoder.geocode({ address: enteredAddress }, (results, status) => {
  if (status === google.maps.GeocoderStatus.OK && results?.[0]) {
    const coordinates = results[0].geometry.location
    // 可直接使用coordinates操作地图
  }
})

这种方式会自动处理API鉴权、请求限流、错误重试等逻辑，比自己封装HTTP请求的稳定性和开发效率更高。

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