如何无需点击按钮，实现页面加载时自动展示地理定位匹配的办公点联系电话

原有逻辑是通过按钮点击触发地理位置查询，要实现页面加载完成自动显示，只需要新增页面加载完成的监听，自动调用获取位置的方法即可，同时要注意DOM加载顺序避免获取元素失败。

修改后的完整代码 #

<!-- 如果不需要触发按钮可以直接删除下面这行按钮代码 -->
<!-- <button onclick="getLocation()">点击获取离你最近的办公地点</button> -->
<p id="phonenumber"></p>

<script>
// 存储最近办公点电话号码的DOM元素
var x;

// Marketo各办公点坐标
var officeLocations = {
    "圣马特奥": {latitude: 37.5596465, longitude: -122.2870142},
    "亚特兰大": {latitude: 33.8547013, longitude: -84.35552349999999},
    "东京": {latitude: 35.6895, longitude: 139.6917},
    "都柏林": {latitude: 53.3478, longitude: -6.2603097},
    "悉尼": {latitude: -33.873651, longitude: 151.2068896},
    "波特兰": {latitude: 45.512089, longitude: -122.6763367},
    "特拉维夫": {latitude: 32.0852999, longitude: 34.78176759999999}
}

// Marketo各办公点联系电话
var officePhoneNumbers = {
    "圣马特奥": "+1-650-376-2300",
    "亚特兰大": "+1-877-260-6586",
    "东京": "+81-03-6759-8280",
    "都柏林": "+353-1-242-3000",
    "悉尼": "+61-2-9045-2711",
    "波特兰": "+1-877-260-6586",
    "特拉维夫": "+1-877-260-6586"
}

// 获取用户当前位置，传入位置成功后的回调方法
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(findNearestOffice, handleLocationError);
    } else {
        x.innerHTML = "Marketo办公地点：圣马特奥<br>联系电话：+1-877-260-6586";
    }
}

// 计算离用户最近的办公点
function findNearestOffice(position) {
    var nearestOffice = geolib.findNearest({latitude: position.coords.latitude, longitude: position.coords.longitude}, officeLocations);
    x.innerHTML = "Marketo办公地点：" + nearestOffice.key + "<br>联系电话：" +  officePhoneNumbers[nearestOffice.key];
}

// 新增位置获取失败的处理逻辑（用户拒绝授权、定位失败等场景）
function handleLocationError() {
    x.innerHTML = "Marketo办公地点：圣马特奥<br>联系电话：+1-877-260-6586";
}

// 页面DOM加载完成后执行初始化逻辑
document.addEventListener('DOMContentLoaded', function() {
    x = document.getElementById("phonenumber");
    getLocation();
});
</script>

关键修改点说明 #

• 新增DOMContentLoaded事件监听，确保页面DOM元素加载完成后再获取电话号码展示节点、调用定位方法，避免出现节点不存在的报错
• 新增handleLocationError错误处理方法，覆盖用户拒绝位置授权、定位失败等异常场景，避免页面一直无内容展示
• 不需要按钮可以直接删除对应按钮代码，不影响自动执行逻辑

注意事项 #

• 代码依赖geolib定位计算库，需要在当前脚本之前引入该库才能正常运行
• 现代浏览器仅允许HTTPS站点、localhost本地调试环境调用地理定位接口，HTTP公网站点无法触发定位功能
• 页面加载后会弹出位置授权提示，用户授权后才会展示匹配的最近办公点信息

内容的提问来源于stack exchange，提问作者jQuery-Student1989