获取ISS经纬度后添加Google Maps标记报错：lat非数值问题

我尝试获取国际空间站（ISS）的位置数据，在Google Maps上添加标记显示其当前位置，编写的代码如下：

var map; // Globale Kartenvariable

function initMap(latitude, longitude) {
  // Erstelle eine neue Karte
  map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: latitude, lng: longitude },
    zoom: 18 // Ändere den Zoom-Wert nach Bedarf
  });

  // Füge einen Event Listener für das Klicken auf die Karte hinzu
  google.maps.event.addListener(map, 'click', function (event) {
    addMarker(event.latLng);
  });

  new google.maps.Marker({
    position: { lat: getIssLat(), lng:getIssLng() },
    map,
    title: "iss"
  })
}

const apiurl = 'https://api.wheretheiss.at/v1/satellites/25544';
    


async function getIssLat(){
  const response = await fetch(apiurl);
  const data = await response.json();
  const {latitude,longitude} = data;
  console.log(latitude);
  return (latitude);
}

async function getIssLng(){
  const response = await fetch(apiurl);
  const data = await response.json();
  const {latitude,longitude} = data;
  console.log(longitude);
  return (longitude);
}

网站控制台已输出正确的经纬度数值（例如：51.136557753762），但运行时出现错误：js?key=...=initMap:138 InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

错误原因 #

getIssLat()和getIssLng()是async异步函数，调用这类函数时，不会直接返回你期望的经纬度数值，而是返回一个Promise对象。Google Maps的Marker组件要求position的lat和lng必须是数字类型，你直接把Promise对象传进去，自然会触发“不是数字”的报错。

控制台能输出正确数值是因为你在async函数内部用console.log打印了真实的经纬度，但函数本身的返回值还是Promise，不是那个数值。另外你还做了重复的API请求，两个async函数各自调用一次fetch(apiurl)，既浪费资源又可能导致两次返回的经纬度不一致（ISS位置一直在变）。

修复方案 #

1. 合并异步请求，只调用一次API获取完整的ISS位置
2. 确保拿到真实的经纬度数值后，再创建Marker标记

修改后的代码示例：

var map; // 全局地图变量
const apiurl = 'https://api.wheretheiss.at/v1/satellites/25544';

// 统一获取ISS位置的异步函数
async function getIssPosition() {
  const response = await fetch(apiurl);
  const data = await response.json();
  // 强制转换为数字，避免API返回字符串的情况（当前API返回数字，做个保险）
  return {
    lat: Number(data.latitude),
    lng: Number(data.longitude)
  };
}

// 将initMap改为异步函数，确保先拿到ISS位置再初始化地图和标记
async function initMap() {
  // 等待ISS位置数据返回
  const issPosition = await getIssPosition();

  // 初始化地图，用ISS位置作为中心（zoom设为5更合适，18会太近看不到）
  map = new google.maps.Map(document.getElementById('map'), {
    center: issPosition,
    zoom: 5
  });

  // 保留你原来的地图点击事件（addMarker函数需要你自己实现）
  google.maps.event.addListener(map, 'click', function (event) {
    addMarker(event.latLng);
  });

  // 创建ISS标记，直接用拿到的数值对象
  new google.maps.Marker({
    position: issPosition,
    map: map,
    title: "ISS"
  });
}

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