HTML 地理位置 - 蝴蝶教程

HTML5地理位置

HTML Geolocation API用于定位用户的位置。由于这会损害隐私，除非用户批准，否则该位置不可用。

注意：地理位置对于具有GPS的设备（如iPhone）最准确。

浏览器支持

Internet Explorer	Chrome	FireFox	Safari	Opera

9.0（包含）以上支持	5.0-49.0（http），50.0（https）以上支持	3.5（包含）以上支持	5.0（包含）以上支持	16.0（包含）以上支持

注意：从Chrome 50开始，Geolocation API仅适用于HTTPS等安全上下文。如果您的站点托管在非安全源（例如HTTP）上，则获取用户位置的请求将不再起作用。

获取当前地理位置示例：

<!DOCTYPE html>
                       <html>
                       <body>
   
                       <p>点击按钮获取当前地理位置。</p>
   
                       <button onclick="getLocation()">尝试一下</button>
   
                       <p id="demo"></p>
   
                       <script>
   
                         var x = document.getElementById("demo");
   
                         function getLocation() {
                             if (navigator.geolocation) {
                                 navigator.geolocation.getCurrentPosition(showPosition);
                             } else { 
                                 x.innerHTML = "这个浏览器不支持获取地理位置。";
                             }
                         }
   
                         function showPosition(position) {
                             x.innerHTML = "当前纬度: " + position.coords.latitude + 
                             '<br\>当前经度: ' + position.coords.longitude;
                         }
                       </script>
   
                       </body>
                       </html>

尝试一下

示例说明：

1，检查地理位置是否受支持。
2，如果支持，请运行getCurrentPosition()方法。如果没有，则向用户显示浏览器不支持的消息。
3，如果getCurrentPosition()方法成功，它会将坐标对象返回参数到指定的函数（showPosition）中。
4，showPosition()函数输出纬度和经度。

提示：上面的示例是一个非常基本的Geolocation脚本，没有错误处理。

处理错误和拒绝

getCurrentPosition()方法的第二个参数用于处理错误。如果无法获取用户的位置，它指定要运行的函数： 示例：

<!DOCTYPE html>
                       <html>
                       <body>
   
                       <p>点击按钮获取当前地理位置。</p>
   
                       <button onclick="getLocation()">尝试一下</button>
   
                       <p id="demo"></p>
   
                       <script>
   
                         var x = document.getElementById("demo");
   
                         function getLocation() {
                             if (navigator.geolocation) {
                                 navigator.geolocation.getCurrentPosition(showPosition,showError);
                             } else { 
                                 x.innerHTML = "这个浏览器不支持获取地理位置。";
                             }
                         }
   
                         function showPosition(position) {
                             x.innerHTML = "当前纬度: " + position.coords.latitude + 
                             '<br\>当前经度: ' + position.coords.longitude;
                         }
   
                         function showError(error) {
                               switch(error.code) {
                                   case error.PERMISSION_DENIED:
                                       x.innerHTML = "用户拒绝请求地理位置。"
                                       break;
                                   case error.POSITION_UNAVAILABLE:
                                       x.innerHTML = "位置信息是不可用的。"
                                       break;
                                   case error.TIMEOUT:
                                       x.innerHTML = "请求地理位置超时。"
                                       break;
                                   case error.UNKNOWN_ERROR:
                                       x.innerHTML = "未知错误。"
                                       break;
                               }
                           }
                       </script>
   
                       </body>
                       </html>

尝试一下

地图中显示结果

要在地图中显示结果，您需要访问地图服务，例如Google地图。在下面的示例中，返回的纬度和经度用于显示Google地图中的位置（使用静态图像）： 示例：

<!DOCTYPE html>
                       <html>
                       <body>
   
                       <p id="demo">点击按钮获取您的位置。</p>
   
                       <button onclick="getLocation()">尝试一下</button>
   
                       <div id="mapholder"></div>
   
                       <script>
                         var x = document.getElementById("demo");
   
                         function getLocation() {
                             if (navigator.geolocation) {
                                 navigator.geolocation.getCurrentPosition(showPosition, showError);
                             } else {
                                 x.innerHTML = "浏览器不支持获取地理位置。";
                             }
                         }
   
                         function showPosition(position) {
                             var latlon = position.coords.latitude + "," + position.coords.longitude;
                             var img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
                             +latlon+"&zoom=14&size=400x300";
   
                             document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
                         }
                        
   
                         function showError(error) {
                             switch(error.code) {
                                 case error.PERMISSION_DENIED:
                                     x.innerHTML = "用户拒绝获取地理位置。"
                                     break;
                                 case error.POSITION_UNAVAILABLE:
                                     x.innerHTML = "地理位置是不可用的。"
                                     break;
                                 case error.TIMEOUT:
                                     x.innerHTML = "请求超时。"
                                     break;
                                 case error.UNKNOWN_ERROR:
                                     x.innerHTML = "未知错误。"
                                     break;
                             }
                         }
                       </script>
   
                       </body>
                       </html>

尝试一下

交互式地图显示：

<script>
                       var x = document.getElementById("demo");
                       function getLocation() {
                           if (navigator.geolocation) {
                               navigator.geolocation.getCurrentPosition(showPosition, showError);
                           } else { 
                               x.innerHTML = "浏览器不支持地理位置。";
                           }
                       }
   
                       function showPosition(position) {
                           var lat = position.coords.latitude;
                           var lon = position.coords.longitude;
                           var latlon = new google.maps.LatLng(lat, lon)
                           var mapholder = document.getElementById('mapholder')
                           mapholder.style.height = '250px';
                           mapholder.style.width = '500px';
   
                           var myOptions = {
                           center:latlon,zoom:14,
                           mapTypeId:google.maps.MapTypeId.ROADMAP,
                           mapTypeControl:false,
                           navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
                           }
                           
                           var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
                           var marker = new google.maps.Marker({position:latlon,map:map,title:"您在这里!"});
                       }
   
                       function showError(error) {
                           switch(error.code) {
                               case error.PERMISSION_DENIED:
                                   x.innerHTML = "用户拒绝了请求地理位置。"
                                   break;
                               case error.POSITION_UNAVAILABLE:
                                   x.innerHTML = "地理位置信息不可用。"
                                   break;
                               case error.TIMEOUT:
                                   x.innerHTML = "请求超时。"
                                   break;
                               case error.UNKNOWN_ERROR:
                                   x.innerHTML = "未知错误。"
                                   break;
                           }
                       }
                       </script>

尝试一下

getCurrentPosition()方法 | 返回数据

getCurrentPosition()方法成功返回一个对象。始终返回纬度，经度和精度属性。如果可用，将返回其他属性：

属性	返回值说明
coords.latitude	十进制数的纬度（总是返回）
coords.longitude	十进制数的经度（总是返回）
coords.accuracy	位置精度（总是返回）
coords.altitude	海拔高度（如果可用的话返回）
coords.altitudeAccuracy	位置的高度精度（如果可用的话返回）
coords.heading	从北向顺时针方向的航向(如果可用的话返回)
coords.speed	以米每秒为单位的速度(如果有的话返回)
timestamp	响应的日期/时间(如有的话返回)

地理位置对象 | 其他有趣的方法

Geolocation对象还有其他有趣的方法： 1，watchPosition() - 返回用户的当前位置，并在用户移动时继续返回更新的位置（如汽车中的GPS）。 2，clearWatch()- 停止watchPosition()方法。以下示例显示了该watchPosition()方法。您需要一个准确的GPS设备来测试它（如iPhone）：

<!DOCTYPE html>
                       <html>
                       <body>
   
                       <p>点击这个按钮获取地理位置：</p>
   
                       <button onclick="getLocation()">尝试一下</button>
   
                       <p id="demo"></p>
   
                       <script>
                       var x = document.getElementById("demo");
                       function getLocation() {
                           if (navigator.geolocation) {
                               navigator.geolocation.watchPosition(showPosition);
                           } else {
                               x.innerHTML = "这个浏览器不支持地理位置获取。";
                           }
                       }
                       function showPosition(position) {
                           x.innerHTML = "纬度: " + position.coords.latitude + 
                           '<br\>经度: ' + position.coords.longitude; 
                       }
                       </script>
   
                       </body>
                       </html>

尝试一下