通过动态获取经纬度重新初始化Google Maps时出现数值类型错误

这个错误的核心原因很直白：你从隐藏输入框拿到的经纬度是字符串类型，但Google Maps API要求lat和lng必须是数字类型。

当你直接写var latVal = -25.344;时，这是标准的数字格式，API能正常识别；但通过$("#lat-"+count).val()获取值时，返回的是字符串（哪怕输入框里填的是数字，也是字符串形式），这就触发了InvalidValueError。

修复方案：将字符串转换为数字 #

只需要在获取经纬度值后，用parseFloat()（推荐，因为经纬度是浮点数）或者Number()把字符串转成数字即可。

修改后的完整脚本如下：

$(document).on( 'click','button[id^="showMap-"]', function(event) { 
  event.preventDefault(); 
  var arr = this.id.split('-'); 
  var count = arr[1]; 
  // 关键修改：将字符串转为浮点数
  var latVal = parseFloat($("#lat-"+count).val()); 
  var lonVal = parseFloat($("#lon-"+count).val()); 
  
  // 可选：添加简单校验，避免无效坐标
  if (isNaN(latVal) || isNaN(lonVal)) {
    alert('Invalid coordinates provided!');
    return;
  }
  
  var titleVal = $("#info-"+count).text(); 
  var newCenter = {lat: latVal, lng: lonVal}; 
  var map = new google.maps.Map( document.getElementById('map'), {zoom: 4, center: newCenter}); 
  var marker = new google.maps.Marker({position: newCenter, map: map, title: titleVal}); 
});

为什么这样有效？ #

parseFloat()会把输入的字符串（比如"32.3396528"）转换成对应的浮点数（32.3396528），这样Google Maps API就能正确识别这个值作为坐标了。

另外，添加的校验逻辑可以避免因输入框值为空或非数字导致的其他错误，让你的代码更健壮。

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