下一节:

  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>
       
    
    
下一节: