如何在JavaScript中从外部函数访问函数内嵌套对象的属性？

我明白你的问题啦——你想在点击按钮时把输入框的值赋值给地图中心的纬度，但alertFunction根本碰不到initMap里的map对象对吧？这是因为函数内部的局部变量默认是对外封闭的，外部函数没法直接访问。我给你几个实用的解决办法，都是在Rails环境下能用的：

方法1：把map变量提升到外部作用域（推荐） #

把map变量声明在所有函数外面，这样两个函数都能访问到它。修改后的代码大概是这样：

<script>
// 把map变量提升到外层作用域，让两个函数都能访问
let map;

// 初始化地图的函数
function initMap() {
  // 这里不再用var/let声明map，直接赋值
  map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 初始纬度值, lng: 初始经度值 },
    zoom: 8
  });
}

// 按钮点击触发的函数
function alertFunction() {
  var x = document.getElementById("myInput").value;
  // 现在就能直接修改地图中心了，用setCenter是地图API的规范用法
  map.setCenter({ lat: parseFloat(x), lng: map.center.lng() });
  // 也可以直接修改lat属性：map.center.lat = parseFloat(x); 效果一致
}
</script>

方法2：用闭包让alertFunction访问map #

如果不想把map暴露到外层，可以把alertFunction定义在initMap内部，利用闭包特性访问内部的map变量。不过要注意按钮的事件绑定时机，得在initMap里完成绑定：

<script>
function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 初始纬度值, lng: 初始经度值 },
    zoom: 8
  });

  // 把alertFunction定义在initMap内部，就能直接访问map
  function alertFunction() {
    var x = document.getElementById("myInput").value;
    map.setCenter({ lat: parseFloat(x), lng: map.center.lng() });
  }

  // 在这里绑定按钮的点击事件
  document.getElementById('你的按钮ID').addEventListener('click', alertFunction);
}
</script>

方法3：谨慎使用全局变量（不推荐但简单） #

如果只是快速测试，可以把map挂载到window对象上，变成全局变量：

<script>
function initMap() {
  // 把map赋值给window，变成全局可访问
  window.map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 初始纬度值, lng: 初始经度值 },
    zoom: 8
  });
}

function alertFunction() {
  var x = document.getElementById("myInput").value;
  window.map.setCenter({ lat: parseFloat(x), lng: window.map.center.lng() });
}
</script>

注意：全局变量容易引发命名冲突，尤其是在Rails这种可能引入很多第三方脚本的环境里，所以优先用前两种方法。

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