JavaScript外部函数向内部函数传值：Google Maps API场景技术问询

嘿，这个场景在使用Google Maps API时挺常见的，我给你几个实用的解决方案，你可以根据自己的需求来选：

方案1：让外部函数返回坐标值，直接在initMap中调用 #

这是最直接的方式，只需要调整外部文件里的函数，让它返回坐标对象，然后在initMap里调用它拿到值就行。

首先修改cities.js里的函数：

// cities.js
function ldn() {
  // 替换成你实际的坐标数值
  return { lat: 51.5074, lng: -0.1278 };
}

然后在index.html的initMap里调用这个函数：

// index.html中的script标签
function initMap() {
  // 调用外部文件定义的ldn函数，获取坐标
  var coords = ldn();
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: coords,
    mapTypeId: 'terrain'
  });
}

⚠️ 注意：一定要确保cities.js在包含initMap的脚本之前引入，比如在index.html里先写<script src="cities.js"></script>，再写initMap所在的<script>标签，否则会出现“ldn is not defined”的错误。

方案2：给initMap添加参数，动态传入坐标 #

如果需要根据用户操作（比如点击切换城市）来更新地图，这个方案更灵活。我们可以让initMap接受一个坐标参数，然后在需要初始化地图时，调用外部函数获取坐标再传进去。

修改initMap函数：

function initMap(coords) {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: coords,
    mapTypeId: 'terrain'
  });
}

然后在合适的时机调用它：

// 页面加载完成后初始化伦敦地图
window.addEventListener('load', function() {
  var londonCoords = ldn();
  initMap(londonCoords);
});

// 或者给按钮绑定点击事件，切换到其他城市（假设cities.js里有对应函数）
document.getElementById('switchToParis').addEventListener('click', function() {
  initMap(paris());
});

方案3：把城市坐标做成对象集合，更易维护 #

如果你的城市坐标很多，单独写函数会显得繁琐，不如把所有坐标都放在一个对象里，这样管理和调用都更清晰。

修改cities.js：

// cities.js
const cityCoords = {
  london: { lat: 51.5074, lng: -0.1278 },
  newYork: { lat: 40.7128, lng: -74.0060 },
  paris: { lat: 48.8566, lng: 2.3522 }
};

然后在initMap里直接取用：

function initMap() {
  // 选择需要的城市坐标
  var coords = cityCoords.london;
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: coords,
    mapTypeId: 'terrain'
  });
}

这几种方案都能解决你的问题，选最适合你代码结构的就行～

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