html5&css&js代码 027 地理定位_css获取用户定位-CSDN博客

本文链接：https://blog.csdn.net/qq_40071585/article/details/136851754

该篇文章详细介绍了如何使用HTML5、CSS和JavaScript创建一个网页，通过navigator.geolocationAPI获取用户地理位置信息，并实时显示纬度、经度等详细数据。

html5&css&js代码 027 地理定位

一、代码
二、解释

这段HTML代码实现了一个网页，用于获取和显示用户的地理定位信息，包括纬度、经度、位置精度、海拔、海拔精度、方向、速度和定位时间。

在这里插入图片描述

一、代码

<!DOCTYPE html>
<html lang="zh-cn">
   <head>
      <title>编程笔记 html5&css&js HTML MathML</title>
      <meta charset="utf-8" />
      <style>
         body {
            font-size: 2em;
            color: cyan;
            background-color: teal;
         }
         .container {
            color: cyan;
            background-color: teal;
            width: 500px; /* 设置容器的宽度 */
            margin: 0 auto; /* 将左右边距设置为自动 */
            line-height: 2;
         }
         button {
            font-size: 1.5em;
         }
         h1 {
            margin-top: 100px;
            text-align: center;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <h1>测试地理定位</h1>
         <p id="demo">
            纬度:<br>
            经度:<br>
            位置精度:<br>
            海拔:<br>
            海拔精度:<br>
            方向:<br>
            速度(米/秒):<br>
            定位时间: <br>
         </p>
         <button onclick="getLocation()">获得地理定位</button>
         <script>
            let x = document.getElementById("demo");
            function getLocation() {
               if (navigator.geolocation) {
                  navigator.geolocation.getCurrentPosition(showPosition);
               } else {
                  x.innerHTML = "Geolocation is not supported by this browser.";
               }
            }
            //coords.latitude	十进制数的纬度
            // coords.longitude	十进制数的经度
            // coords.accuracy	位置精度
            // coords.altitude	海拔，海平面以上以米计
            // coords.altitudeAccuracy	位置的海拔精度
            // coords.heading	方向，从正北开始以度计
            // coords.speed	速度，以米/每秒计
            // timestamp	响应的日期/时间
            function showPosition(position) {
               x.innerHTML =
                  "纬度: " +
                  position.coords.latitude +
                  "<br />经度: " +
                  position.coords.longitude +
                  "<br />位置精度: " +
                  position.coords.accuracy +
                  "<br />海拔: " +
                  position.coords.altitude +
                  "<br />海拔精度: " +
                  position.coords.altitudeAccuracy +
                  "<br />方向: " +
                  position.coords.heading +
                  "<br />速度(米/秒): " +
                  position.speed +
                  "<br />定位时间: " +
                  position.timestamp;
            }
         </script>
      </div>
   </body>
</html>

二、解释

这段HTML代码实现了一个网页，用于获取和显示用户的地理定位信息，包括纬度、经度、位置精度、海拔、海拔精度、方向、速度和定位时间。页面使用了CSS样式表进行布局和样式设置，使得字体大小为2em，颜色为 cyan，背景颜色为teal。容器宽度为500px，居中显示，行高为2。标题为"测试地理定位"，通过按钮触发获取地理定位信息的操作。获取地理定位信息的功能通过JavaScript实现，使用了navigator.geolocation对象的getCurrentPosition()方法来获取当前位置信息，并通过showPosition()函数将信息显示在页面上。若浏览器不支持地理定位，则显示相应提示信息。