Google Maps API：错误经纬度致地图空白，如何阻止无效标记？

核心逻辑 #

Google Maps的LatLng对象对超出范围的坐标不会抛出错误，但会直接导致地图渲染异常。解决关键是在创建标记前先校验经纬度是否处于合法范围：

• 纬度（latitude）合法范围：-90 至 90（包含边界值）
• 经度（longitude）合法范围：-180 至 180（包含边界值）

具体实现代码 #

封装校验函数，仅在经纬度合法时创建标记：

// 校验经纬度合法性
function isValidLatLng(lat, lng) {
  return typeof lat === 'number' && typeof lng === 'number' &&
         lat >= -90 && lat <= 90 &&
         lng >= -180 && lng <= 180;
}

// 替换原有代码逻辑
var lat = 510.51356;
var lng = -0.7015494;

if (isValidLatLng(lat, lng)) {
  var myLatlng = new google.maps.LatLng(lat, lng);
  
  var markerOptions = {
      map: map,
      position: myLatlng,
      title: "MY LOCATION TITLE"      
  };
  marker_3744 = createMarker_map(markerOptions);
  
  marker_3744.set("content", "<strong>MY LOCATION TITLE</strong><br /><strong>Full address in here</strong>");
  
  google.maps.event.addListener(marker_3744, "click", function(event) {
      iw_map.setContent(this.get("content"));
      iw_map.open(map, this);
  });
} else {
  // 可选：记录错误日志或做其他处理
  console.warn(`无效经纬度：${lat}, ${lng}，跳过标记创建`);
}

额外优化建议 #

1. 后端前置过滤：既然数据从PHP拉取，建议在后端先校验经纬度合法性，不将错误数据传递到前端，减少前端校验压力。
2. 处理字符串格式坐标：如果从数据库拿到的是字符串格式（如"510.51356, -0.7015494"），需先拆分转成数字再校验：

   var coordStr = "510.51356, -0.7015494";
   var coords = coordStr.split(",").map(val => parseFloat(val.trim()));
   var lat = coords[0];
   var lng = coords[1];
   
   // 调用isValidLatLng校验
   

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