本地XAMPP网站Google Maps API在其他设备无法加载的解决咨询

1. 检查Google Maps API密钥的授权限制 #

• 登录Google Cloud控制台，找到你的API密钥：
  • 查看应用限制：如果设置了HTTP referrers，必须添加本地服务器的局域网IP规则（比如http://192.168.x.y/*），不能只保留localhost；测试阶段可以暂时取消限制（后续记得恢复安全配置）
  • 确认API启用状态：确保Maps JavaScript API以及坐标获取用到的相关API（如Geocoding API）已启用

2. 确认XAMPP的跨设备访问配置 #

• 打开XAMPP的httpd.conf文件：
  • 确保监听规则是Listen 0.0.0.0:80（而非Listen 127.0.0.1:80），允许所有IP访问
  • 在<Directory "htdocs">段落中，开启Require all granted，注释掉Require local
• 修改后重启Apache服务，手机端通过电脑局域网IP（如http://192.168.1.100）访问，先验证静态资源（CSS、JS）是否能正常加载

3. 修正API加载的路径与协议 #

• 若API链接写死为https，但本地网站用http访问，可能出现混合内容拦截；建议改用相对协议加载：//maps.googleapis.com/maps/api/js?key=你的密钥
• 检查页面初始化代码，避免硬编码localhost作为地图加载的依赖地址

4. 排查坐标获取的权限与API问题 #

• 如果用浏览器原生Geolocation API获取坐标，手机端需手动授权网站获取位置权限
• 开启浏览器控制台（手机可通过Chrome远程调试），查看是否有Geolocation相关的权限或API报错
• 若通过Google Maps反向地理编码获取坐标，确认Geocoding API已启用且密钥有访问权限

5. 验证网络与防火墙连通性 #

• 确保手机和电脑处于同一WiFi局域网
• 临时关闭电脑防火墙（测试用），或在防火墙上开放Apache使用的端口（默认80）
• 用手机ping电脑的局域网IP，确认网络连通正常

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