求助：如何在PHPRunner编辑器中添加Google Maps相关JS函数？

我之前在PHPRunner里整合Google Maps的时候也踩过类似的坑，给你整理一套清晰的步骤，应该能顺利搞定：

1. 找到正确的OnLoad事件编辑入口 #

首先得定位到PHPRunner里编写页面加载逻辑的地方：

• 打开你的PHPRunner项目，进入要添加地图的目标页面（列表页、详情页或自定义页面都可以）
• 要么点击页面顶部工具栏的JavaScript按钮，要么在右侧面板的「Events」区域找到Page_Load事件，点击后会弹出JS代码编辑器，这就是编写OnLoad逻辑的核心区域

2. 先引入Google Maps API脚本 #

Google Maps需要加载官方的API才能正常工作，你可以这样处理：

• 切换到页面的HTML选项卡，找到<head>标签区域，添加API引入代码：

  <script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places"></script>
  

  记得把你的API密钥替换成你在Google Cloud平台申请的有效密钥，另外libraries=places是可选的，如果你不需要地点搜索功能可以去掉

3. 在OnLoad函数中编写地图逻辑 #

回到JavaScript编辑器，在自动生成的pageLoad()函数里添加你的地图初始化代码，示例如下：

function pageLoad() {
  // 先确认页面上有承载地图的容器元素
  const mapContainer = document.getElementById('map-container');
  if (!mapContainer) return;

  // 初始化地图配置
  const mapOptions = {
    center: new google.maps.LatLng(31.2304, 121.4737), // 示例坐标：上海
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  // 创建地图实例
  const map = new google.maps.Map(mapContainer, mapOptions);

  // 可选：添加地图标记
  const marker = new google.maps.Marker({
    position: new google.maps.LatLng(31.2304, 121.4737),
    map: map,
    title: '上海市中心'
  });
}

同时，你需要在HTML选项卡的合适位置（比如页面内容区）添加地图容器：

<div id="map-container" style="width: 100%; height: 450px; border: 1px solid #eee;"></div>

一定要给容器设置明确的宽高，否则地图会显示不出来

4. 调试与常见问题排查 #

• 保存项目后生成代码并预览，打开浏览器开发者工具（F12）的Console面板，查看是否有报错：
  • 如果提示google is not defined，大概率是API脚本没加载成功，检查密钥是否有效、域名是否在API的允许列表里
  • 如果地图显示空白，检查容器的宽高是否设置正确，或者地图初始化时的坐标是否合法
• 如果需要异步加载API（避免阻塞页面加载），可以改用回调函数的方式：

  function pageLoad() {
    // 动态创建脚本标签加载API
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initMap';
    document.head.appendChild(script);
  }
  
  // 地图初始化回调函数
  function initMap() {
    const map = new google.maps.Map(document.getElementById('map-container'), {
      center: {lat: 31.2304, lng: 121.4737},
      zoom: 10
    });
  }
  

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