基于Places API的项目：默认单选按钮页面加载时无法加载地图的问题求助

嘿，这个问题我之前帮别人解决过不少！核心原因其实很简单——默认选中的单选按钮在页面加载时不会触发change事件，所以你的地图加载逻辑根本没跑起来，而切换单选按钮时会触发change，所以功能正常。下面给你具体的解决方案：

第一步：封装核心逻辑为独立函数 #

首先把处理位置获取、地图加载、场所查询的逻辑抽成一个单独的函数，这样不管是初始化还是切换单选按钮都能复用：

// 封装核心业务逻辑：根据场所类型加载地图和周边POI
function loadPlacesByType(placeType) {
  // 先检查浏览器是否支持地理定位
  if (!navigator.geolocation) {
    alert("你的浏览器不支持地理定位功能，请更换浏览器重试");
    return;
  }

  // 获取当前位置
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const userLat = position.coords.latitude;
      const userLng = position.coords.longitude;

      // 这里写你的地图初始化和5公里范围内场所查询逻辑
      // 示例：打印核心参数（实际替换成你的地图API调用）
      console.log(`加载地图：中心坐标(${userLat}, ${userLng})，查询${placeType}（5公里范围）`);
      // 比如调用地图API的初始化方法、POI检索接口等
    },
    (error) => {
      // 处理位置获取失败的情况
      switch (error.code) {
        case error.PERMISSION_DENIED:
          alert("你拒绝了位置权限请求，请开启权限后重试");
          break;
        case error.POSITION_UNAVAILABLE:
          alert("无法获取你的位置，请检查网络或定位设置");
          break;
        case error.TIMEOUT:
          alert("获取位置超时，请重试");
          break;
      }
    }
  );
}

第二步：绑定事件 + 主动触发初始化逻辑 #

页面加载完成后，给所有单选按钮绑定change事件，同时主动找到默认选中的单选按钮，调用上面的函数：

// 页面DOM加载完成后执行初始化
document.addEventListener("DOMContentLoaded", () => {
  // 获取所有同组的单选按钮（假设name属性为"placeCategory"）
  const radioGroup = document.querySelectorAll('input[type="radio"][name="placeCategory"]');

  // 给每个单选按钮绑定切换事件
  radioGroup.forEach((radio) => {
    radio.addEventListener("change", function () {
      if (this.checked) {
        loadPlacesByType(this.value);
      }
    });
  });

  // 找到默认选中的单选按钮，主动触发加载逻辑
  const defaultRadio = document.querySelector('input[type="radio"][name="placeCategory"]:checked');
  if (defaultRadio) {
    loadPlacesByType(defaultRadio.value);
  }
});

额外排查点 #

• 确认你的默认单选按钮确实设置了checked属性，比如：

  <input type="radio" name="placeCategory" value="school" checked> 学校
  

• 打开浏览器控制台（F12）查看是否有报错，比如地理定位权限被拒、地图API密钥无效等问题
• 如果地图初始化是异步操作，确保在获取到经纬度之后再执行地图初始化，避免顺序倒置导致加载失败

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