如何利用Airtable的JSON数据在Google Maps中创建标记

嘿，我看了你的代码，发现两个关键问题导致地图标记无法正确生成：

问题1：错误传递坐标参数 #

你在遍历数据时，把整个lattitudeData和longitudeData数组传给了google.maps.LatLng，但这个构造函数需要的是单个数值，而不是数组。而且其实你根本不需要把坐标存进数组，直接用当前遍历项的字段值就好。

问题2：地图初始化与数据请求的异步顺序问题 #

Google Maps的脚本是通过async defer加载的，这意味着initMap会在地图脚本加载完成后才执行，但你的getAirtableData()是直接在全局调用的，可能会出现地图还没初始化完成就尝试创建标记的情况，导致map变量为空。

修正后的完整代码 #

JavaScript部分

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(2.8,-187.3),
    mapTypeId: 'terrain',
  });
  // 地图初始化完成后再请求数据，避免map未定义
  getAirtableData();
}

function getAirtableData() {
  axios.get("https://api.airtable.com/v0/apptDNPo9jnXShzNh/Map%20Test?view=Grid%20view",
    {
      headers: { Authorization: "Bearer keyOfJOed1eMhUOGH" }
    }
  ).then(function(response) {
      console.log("Got data (showing first record): ", response.data.records[0]);
      // 遍历每个记录，直接使用当前项的单个坐标值
      response.data.records.forEach(function(item){
        // 先检查坐标字段是否存在，避免报错
        if(item.fields.Lattitude && item.fields.Longitude){
          var latLng = new google.maps.LatLng(
            parseFloat(item.fields.Lattitude), 
            parseFloat(item.fields.Longitude)
          );
          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
        } else {
          console.warn("跳过缺少坐标的记录: ", item);
        }
      });
    }).catch(function(error){
      // 增加错误捕获，方便调试请求问题
      console.error("获取Airtable数据失败: ", error);
    });
}

CSS部分

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

HTML部分

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js">
</script>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHZQkAh_lv36EuNhPlLTxZvdZQUMIkEo0&callback=initMap">
</script>

额外优化说明 #

• 增加了坐标有效性检查，避免因部分记录缺少坐标导致脚本报错
• 把getAirtableData()移到initMap内部调用，确保地图初始化完成后再创建标记
• 新增catch块处理数据请求失败的情况，方便排查网络或权限问题

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