谷歌地图Marker实时更新失败：经纬度非数值或setPosition异常

你遇到的问题主要来自两个关键点：LatLng构造函数的使用错误，以及每次请求数据时都新建Marker而非更新已有实例，这才是Marker位置不更新的核心原因。咱们一步步来解决：

1. 修复LatLng构造函数的参数错误 #

你当前代码里的new google.maps.LatLng([nlat, nlng])写法有误——Google Maps的LatLng构造函数需要接收两个独立的数值参数（纬度在前，经度在后），而不是一个数组。数组会被解析成非预期的格式，直接引发「经纬度的setPosition参数非数值」或者返回_.K {lat: ƒ, lng: ƒ}这类异常对象。

正确的写法应该是：

var latlong = new google.maps.LatLng(nlat, nlng);

2. 复用Marker实例，避免重复创建 #

你现在的droneMarker函数每次调用都会生成一个新的Marker，旧的Marker仍然留在地图上，而且如果LatLng参数错误，新Marker的位置也不会正确显示。正确的思路是初始化一个全局/类级别的Marker实例，之后每次获取新数据时只更新它的位置。

修改后的代码示例 #

假设你在类中维护一个droneMarkerInstance变量：

// 先在地图初始化完成后，创建一次Marker实例
droneMarkerInstance = new google.maps.Marker({
  map: this.map,
  icon: {
    url: 'assets/markers/drone_location.png',
    scaledSize: new google.maps.Size(80, 80),
  }
});

// 编写专门的位置更新函数
updateDroneMarkerPosition(data) {
  const nlat = +data.iss_position.latitude;
  const nlng = +data.iss_position.longitude;
  
  // 先验证数值有效性，避免非数值导致的错误
  if (isNaN(nlat) || isNaN(nlng)) {
    console.error('无效的经纬度数值:', nlat, nlng);
    return;
  }
  
  const latlong = new google.maps.LatLng(nlat, nlng);
  // 更新已有Marker的位置
  this.droneMarkerInstance.setPosition(latlong);
}

之后在你的interval observable回调里，直接调用updateDroneMarkerPosition(data)即可，无需每次新建Marker。

额外调试建议 #

• 在控制台打印nlat和nlng，确认它们确实是数值类型，避免HTTP返回的字符串转换失败。
• 如果问题仍存在，可以打印latlong对象，正常的LatLng对象调用lat()和lng()方法应该能返回正确的数值。

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