JavaScript函数间传值问题：外部JS与HTML脚本函数数据传递

看起来你现在的核心问题是局部变量的作用域限制，以及函数调用顺序的问题。咱们一步步来修正：

先看原代码的问题 #

1. loadLondon里的ldn是函数内部的局部变量，外部的initMap根本访问不到它
2. initMap函数末尾少了闭合的}，这是语法错误，会导致函数无法正常运行
3. initMap定义了参数cityLatLng，但实际调用时没传值，反而用了未定义的ldn

方案1：通过函数返回值显式传递（推荐，避免全局变量污染） #

这种方式最清晰，也符合函数的单一职责原则：

第一步：修改london.js里的loadLondon #

让它直接返回坐标对象：

// london.js
function loadLondon() {
  return {lat: 51.5, lng: -0.1};
}

第二步：修正HTML里的initMap并按顺序调用 #

先加载外部JS，再获取坐标传给initMap：

<!-- 先加载外部的london.js -->
<script src="london.js"></script>
<!-- 再写HTML内的脚本 -->
<script>
function initMap(cityLatLng) { 
  map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 12, 
    center: cityLatLng, // 使用传入的参数
  }); // 补全之前缺失的闭合括号
}

// 先获取伦敦坐标，再初始化地图
const londonCoords = loadLondon();
initMap(londonCoords);
</script>

方案2：使用全局变量（适合简单场景） #

如果你一定要用全局变量，要注意变量的声明位置和函数调用顺序：

第一步：修改london.js #

在函数外部声明全局变量，然后在loadLondon里赋值：

// london.js
// 在函数外部声明全局变量，这样其他脚本能访问到
let ldn;
function loadLondon() { 
  ldn = {lat: 51.5, lng: -0.1};
}

第二步：修正HTML脚本并按顺序执行 #

必须先调用loadLondon给全局变量赋值，再调用initMap：

<script src="london.js"></script>
<script>
function initMap() { 
  map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 12, 
    center: ldn, // 现在能访问到全局的ldn了
  });
}

// 顺序很重要：先初始化坐标，再初始化地图
loadLondon();
initMap();
</script>

额外注意事项 #

• 确保Google Maps API的脚本加载在所有自定义脚本之前，否则google.maps.Map会找不到
• 脚本的加载顺序不能乱：先加载london.js，再加载HTML内的脚本，否则会出现loadLondon is not defined的错误

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