Google Maps报Not a LatLng or LatLngLiteral错误求助：经纬度已为数字仍触发InvalidValueError

我之前也踩过这个坑！明明控制台打印出来lat和lng都是数字，Google Maps API却还是抛出这个错误。下面是几个常见的排查方向和解决方案：

1. 数字被隐式转为字符串（或看似数字的字符串） #

有时候你以为是数字的变量，实际是字符串类型——比如从API接口返回的字段、表单输入值，或者模板渲染时的类型转换问题。比如：

// 错误示例：lat是字符串"39.9042"，不是数字39.9042
const lat = "39.9042";
const lng = "116.4074";

new google.maps.Marker({
  position: { lat, lng }, // 这里会触发错误
  map: mapInstance
});

解决方案：显式转换为数字类型

const lat = Number("39.9042"); // 或 parseFloat()
const lng = parseFloat("116.4074");

new google.maps.Marker({
  position: { lat, lng },
  map: mapInstance
});

2. 经纬度值存在NaN或undefined #

即使大部分场景下是数字，但某些边缘情况可能出现NaN（比如解析空字符串、无效格式的数字）或undefined（比如数据未正确加载）。比如：

// 假设某个接口返回的lat字段为空，解析后变成NaN
const lat = Number(""); // NaN
const lng = 116.4074;

new google.maps.Marker({ position: { lat, lng }, map: mapInstance });

解决方案：添加前置校验

// 校验是否为有效数字
function isValidCoordinate(val) {
  return typeof val === 'number' && !isNaN(val) && isFinite(val);
}

const lat = 39.9042;
const lng = 116.4074;

if (isValidCoordinate(lat) && isValidCoordinate(lng)) {
  new google.maps.Marker({ position: { lat, lng }, map: mapInstance });
} else {
  console.error("无效的经纬度值：", lat, lng);
}

3. LatLngLiteral结构错误 #

Google Maps要求position必须是**{ lat: 数字, lng: 数字 }**格式的对象，如果你写错了属性名（比如用latitude/longitude代替），或者传递了单个数字、数组等非对象结构，都会触发错误。

错误示例：

// 属性名拼写错误
new google.maps.Marker({
  position: { latitude: 39.9042, longitude: 116.4074 }, 
  map: mapInstance
});

// 传递数组而非对象
new google.maps.Marker({
  position: [39.9042, 116.4074], 
  map: mapInstance
});

解决方案：严格遵循LatLngLiteral格式

new google.maps.Marker({
  position: { lat: 39.9042, lng: 116.4074 },
  map: mapInstance
});

4. 调试小技巧 #

如果还是找不到问题，在调用Google Maps API前，打印出经纬度的类型和值：

console.log("lat类型：", typeof lat, "值：", lat);
console.log("lng类型：", typeof lng, "值：", lng);

这能帮你快速定位：比如是否是字符串、是否为NaN、是否undefined。

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