网页获取latitude和longitude报错：Cannot set properties of null

出现Uncaught TypeError: Cannot set properties of null (setting 'textContent')错误的核心原因有三个：

• 页面中没有对应id="latitude"和id="longitude"的DOM元素，调用document.getElementById()会返回null，无法设置textContent
• 代码里把经度的取值写错了：const lon=position.coords.latitude; 应该取longitude
• 拼写错误：longitutde多了一个t，正确的id是longitude

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geolocation Demo</title>
</head>
<body>
    <h1>Hello everyone</h1>
    <!-- 添加用于显示纬度和经度的元素 -->
    <p>纬度：<span id="latitude"></span></p>
    <p>经度：<span id="longitude"></span></p>
    <script>
        if ('geolocation' in navigator) {
            console.log('geolocation is available');
            navigator.geolocation.getCurrentPosition((position) => {
                // 修正经度的取值
                const lat = position.coords.latitude;
                const lon = position.coords.longitude;
                // 修正id拼写错误
                document.getElementById('latitude').textContent = lat;
                document.getElementById('longitude').textContent = lon;
            });
        } else {
            console.log('geolocation IS NOT available ');
        }
    </script>
</body>
</html>

关键修改说明 #

• 在页面中添加了两个<span>元素，分别绑定latitude和longitude的id，用于承载位置数据
• 把const lon=position.coords.latitude;改为const lon=position.coords.longitude;，正确获取经度值
• 修正了getElementById('longitutde')的拼写错误，改为getElementById('longitude')

这样修改后，页面就能正常获取并显示当前设备的纬度和经度了。

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