Google Maps API异常：ISS API返回坐标无法加载至地图

嘿，我来帮你排查这个问题——看起来你遇到的核心矛盾是：用静态Label值能正常初始化地图，但换成ISS API返回的坐标（哪怕控制台能输出正确值）就失效，连先存Label再读都不行。咱们从几个最可能的坑入手：

1. 最容易忽略的：数据类型不匹配 #

你用Label的时候特意加了parseFloat()把文本转成数字，但直接用ISS API返回值的时候没做这个转换！ISS API返回的latitude和longitude都是字符串类型，而Google Maps的lat/lng参数必须是数字类型。控制台输出字符串的时候看起来和数字一模一样，但底层类型不对，地图就不认。

修正代码试试：

ISS = { 
    lat: parseFloat(data['iss_position']['latitude']), 
    lng: parseFloat(data['iss_position']['longitude']) 
};

2. 异步请求的时序问题 #

如果你的地图初始化代码是在页面加载时直接执行的，而ISS API的请求是异步的，那地图初始化的时候，ISS对象还没被API返回的坐标赋值！举个错误的时序例子：

// 错误：先初始化地图，再等API返回
var ISS = { lat: 0, lng: 0 };
initMap(); // 这里用的是初始的(0,0)

fetch('https://api.wheretheiss.at/v1/satellites/25544')
  .then(res => res.json())
  .then(data => {
    ISS = { lat: data.iss_position.latitude, lng: data.iss_position.longitude };
    console.log(ISS); // 这时候地图已经初始化完了，没用了
  });

正确的做法是等API拿到坐标后再初始化地图，或者在回调里更新地图标记：

var ISS = { lat: 0, lng: 0 };
let map, marker;

// 先请求API，拿到坐标再初始化地图
fetch('https://api.wheretheiss.at/v1/satellites/25544')
  .then(res => res.json())
  .then(data => {
    ISS = { 
        lat: parseFloat(data.iss_position.latitude), 
        lng: parseFloat(data.iss_position.longitude) 
    };
    initMap(); // 现在用的是真实坐标
  });

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: ISS
  });
  marker = new google.maps.Marker({
    position: ISS,
    map: map,
    title: 'International Space Station'
  });
}

// 如果需要实时更新，还可以加个定时器
setInterval(() => {
  fetch('https://api.wheretheiss.at/v1/satellites/25544')
    .then(res => res.json())
    .then(data => {
      const newPos = new google.maps.LatLng(
        parseFloat(data.iss_position.latitude),
        parseFloat(data.iss_position.longitude)
      );
      marker.setPosition(newPos);
      map.panTo(newPos);
    });
}, 5000); // 每5秒更新一次

3. ASP.NET控件的ID渲染坑（针对存Label再读的情况） #

你说先把API坐标赋值给asp:Label再读取也无效，这大概率是因为ASP.NET的服务器控件ID在前端渲染后变了！比如如果你的Label放在母版页、ContentPlaceHolder或者其他命名容器里，客户端ID会变成类似ctl00_ContentPlaceHolder1_lblLat这样的，而不是你写的lblLat，这时候document.getElementById('lblLat')根本找不到元素。

解决办法有两种：

• 给Label设置ClientIDMode="Static"，强制客户端ID和服务器端ID一致：

<asp:Label ID="lblLat" runat="server" ClientIDMode="Static"></asp:Label>
<asp:Label ID="lblLong" runat="server" ClientIDMode="Static"></asp:Label>

• 在JS里用服务器代码输出真实的客户端ID：

var latText = document.getElementById('<%= lblLat.ClientID %>').innerText;
var lngText = document.getElementById('<%= lblLong.ClientID %>').innerText;
var ISS = { lat: parseFloat(latText), lng: parseFloat(lngText) };

先试试第一种数据类型的修正，这是最常见的问题，如果不行再排查时序和ID的问题，应该能解决！

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