JS渲染Google Maps餐厅标记时如何过滤无经纬度数据并解决pot未定义报错

直接触发当前报错的原因 #

你的pot变量使用let声明在if语句的块级作用域内，JS的块级作用域规则决定了if分支外部无法访问这个变量。当某条数据的Geocode_Latitude为null时，if分支不会执行，pot从未被定义，后续创建google.maps.Marker时访问pot就直接抛出ReferenceError。

同时你的逻辑顺序完全错位：你仅在if内定义坐标，却无论坐标是否有效，都会执行创建标记、推入标记数组、扩展地图边界的操作，和你“无经纬度就跳过绘制”的核心需求完全相悖。

正确的实现逻辑 #

对每条接口返回的餐厅数据，先完成全量合法性校验，校验不通过直接跳过当前条目，不执行任何地图相关操作：

• 校验覆盖经纬度是否为有效数字、是否符合经纬度的取值范围（纬度-90_{90，经度-180}180）
• 校验通过后再生成坐标对象、创建标记、推入数组、扩展地图边界
• 增加边界空值判断：如果当前搜索结果的所有餐厅都没有有效经纬度，避免map.fitBounds调用报错

可直接替换的核心代码 #

把原getTown函数内的代码替换为以下内容：

async function getTown() {
  const response = await fetch(api_url + '/' + town, requestOptions);
  const data = await response.json();
  const bounds = new google.maps.LatLngBounds();
  let validMarkerCount = 0;

  for (let i = 0; i < data.length; i++) {
    // 转换经纬度为数字类型，自动处理空值、字符串类型的数值
    const la = Number(data[i].Geocode_Latitude);
    const lo = Number(data[i].Geocode_Longitude);

    // 校验不通过直接跳过当前条目
    if (isNaN(la) || isNaN(lo) || la < -90 || la > 90 || lo < -180 || lo > 180) {
      continue;
    }

    // 校验通过后才生成坐标
    const pot = {
      lat: la,
      lng: lo
    };

    const marker = new google.maps.Marker({
      position: pot,
      map: map,
      icon: 'pin.png'
    });

    markersArray.push(marker);
    bounds.extend(marker.position);
    validMarkerCount++;

    // 绑定点击事件
    google.maps.event.addListener(marker, 'click', (function(marker, idx) {
      return function() {
        if (typeof infowindow === 'undefined') infowindow = new google.maps.InfoWindow();
        infowindow.setContent(data[idx].Name || '未命名餐厅');
        infowindow.open(map, marker);
      }
    })(marker, i));
  }

  // 仅当存在有效标记时调整地图视野
  if (validMarkerCount > 0) {
    map.fitBounds(bounds);
  } else {
    alert("当前搜索区域的餐厅均无有效经纬度，无法绘制标记");
  }
}

顺带修复的隐藏问题 #

• 原代码循环变量i未加声明，会污染全局作用域，已改为循环内的块级变量
• 原点击事件中引用的infowindow未初始化，已增加存在性判断，避免点击时报错
• 原点击事件中使用data[i][0]取值，不符合餐厅数据结构，已调整为匹配字段取值，避免内容为空
• 增加了经纬度范围校验，避免异常值导致地图定位偏移

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