谷歌浏览器开发者工具怎样模拟不同的地理位置信息

Chrome可通过Sensors面板模拟经纬度：先开启位置权限并移除屏蔽，再打开开发者工具→More tools→Sensors，选择Custom location输入坐标或选预设城市，Disabled则模拟拒绝授权场景。

你需要在谷歌浏览器中测试网页对不同经纬度坐标的响应，比如验证地图标记是否正确、附近商家列表是否按目标城市加载、区域限流逻辑是否触发——这些都依赖 navigator.geolocation API 返回的坐标值，而 Chrome 提供了原生、稳定、无需扩展的模拟方式。

先确保浏览器有权限获取位置

这一步是前提，缺一不可：如果浏览器未获位置授权，页面连请求弹窗都不会出现，更别说返回模拟坐标。【必须先完成此设置，否则后续所有输入都无效】

在Chrome 地址栏输入 chrome://settings/content/location 并回车 → 确保“网站可以请求使用您的位置”开关为开启状态 → 检查下方“已屏蔽”列表，若测试网站在其中，点击其右侧三点菜单→选择“移除”。

打开 Sensors 面板

开发者工具默认不显示 Sensors 面板，必须主动调出才能覆盖地理定位数据。

打开目标网页 → 按 F12 或 Ctrl+Shift+I（Mac 用 ⌘+Option+I）打开开发者工具 → 点击右上角三个竖点图标 → 选择 More tools → Sensors。

确认面板已加载，且 Geolocation 区域可编辑；若该区域灰显，说明当前页面尚未调用 navigator.geolocation，需先触发一次定位请求（例如点击页面上的“获取当前位置”按钮）。

手动输入自定义经纬度坐标

适用于需精确控制坐标的场景，例如测试某商场周边500米内POI、验证地理围栏边界点、或复现用户上报的异常定位。

在Sensors 面板中找到 Geolocation 下拉菜单 → 选择 Custom location…。

在Latitude 输入框填入纬度（如 22.3193，香港中环），Longitude 输入框填入经度（如 114.1694）→ Accuracy 可留空（默认 100 米），也可填 10 表示高精度模拟。

点击Apply 或直接按 Enter 确认 → 刷新当前页面，JavaScript 调用 navigator.geolocation.getCurrentPosition() 就会立即返回你设定的坐标，无需等待 GPS 初始化。

从预设城市快速切换位置

适合多城市兼容性回归测试，省去查坐标、防手误输错小数位、避免混淆纬度/经度顺序。

方法一：在 Sensors 面板 Geolocation 下拉菜单中，直接选择 Tokyo、London、Shanghai、New York 等任一城市名。

方法二：下拉菜单选 Presets → 在展开的城市列表中点击目标城市，坐标与精度自动注入。

刷新页面后生效。注意：预设城市使用的是 IANA 官方标准坐标，与 Google Maps 实际地标略有偏差，但足够用于功能验证。

强制禁用地理位置以测试失败路径

真实用户可能拒绝授权，前端必须妥善处理 error 回调。这步不是模拟位置，而是模拟“无位置”的健壮性场景。

第一步：在 Sensors 面板中将 Geolocation 下拉菜单设置为 Disabled。

第二步：刷新页面，确保此前已授予的站点权限被临时覆盖。