Google Maps场景：如何从HTML向JS的initMap函数传递参数？

直接在callback里写带参数的函数调用（比如initMap(51.501904,-0.115871)）是行不通的，因为API会尝试调用名称完全匹配这个字符串的全局函数，而不是执行这段带参数的代码。给你两种在JSFiddle里能正常生效的解决方法：

方法一：用全局变量传递参数（推荐） #

这种方式代码结构清晰，也方便后续修改参数：

1. 在引入Google Maps API的脚本标签之前，先定义全局的经纬度变量：

<script>
  window.mapCenterLat = 51.501904;
  window.mapCenterLng = -0.115871;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initMap"></script>

2. 外部JS文件里的initMap函数直接读取全局变量：

function initMap() {
  const center = {
    lat: window.mapCenterLat,
    lng: window.mapCenterLng
  };
  // 初始化地图
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: center
  });
  // 添加交通图层
  const trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}

方法二：用包装函数作为回调 #

如果不想用全局变量，可以创建一个全局包装函数，在里面调用带参数的initMap：

1. HTML里先定义包装函数，再引入API：

<script>
  window.initMapWithParams = function() {
    initMap(51.501904, -0.115871);
  };
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initMapWithParams"></script>

2. 外部JS文件保持initMap接收参数的逻辑：

function initMap(lat, lng) {
  const center = { lat: lat, lng: lng };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: center
  });
  const trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}

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