美文网首页
H5获取经纬度

H5获取经纬度

作者: 哼_ | 来源:发表于2018-09-25 15:48 被阅读193次

    补充: 这个只能在安卓手机上获取位置信息.
    之前觉得H5获取位置信息,难,今天试了一下,也就是2个方法的事情,可以获取到经度纬度就可以了.
    后端要的就是这个数据

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>定位</title>
    </head>
    <body>
        <div id="baidu_geo">
    22334455
        </div>
    </body>
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script>
    
    function getLocation(){ 
      if (navigator.geolocation){ 
        navigator.geolocation.getCurrentPosition(showPosition,showError); 
      }else{ 
        alert("浏览器不支持地理定位。"); 
      } 
    } 
    getLocation();
    
    
    function showError(error){ 
      switch(error.code) { 
        case error.PERMISSION_DENIED: 
          alert("定位失败,用户拒绝请求地理定位"); 
          break; 
        case error.POSITION_UNAVAILABLE: 
          alert("定位失败,位置信息是不可用"); 
          break; 
        case error.TIMEOUT: 
          alert("定位失败,请求获取用户位置超时"); 
          break; 
        case error.UNKNOWN_ERROR: 
          alert("定位失败,定位系统失效"); 
          break; 
      } 
    }
    
    function showPosition(position){
      var latlon = position.coords.latitude+','+position.coords.longitude; 
     alert(latlon)
    //   //google 
    //   var url = 'http://maps.google.cn/maps/api/geocode/json?latlng='+latlon+'&language=CN'; 
    //   $.ajax({ 
    //     type: "GET", 
    //     url: url, 
    //     beforeSend: function(){ 
    //       $("#google_geo").html('正在定位...'); 
    //     }, 
    //     success: function (json) { 
    //       if(json.status=='OK'){ 
    //       var results = json.results; 
    //     //   alert(results)
    //         $.each(results,function(index,array){ 
    //           if(index==0){ 
    //             $("#google_geo").html(array['formatted_address']); 
    //             alert(array['formatted_address'])
    //           } 
    //         }); 
    //       } 
    //     }, 
    //     error: function (XMLHttpRequest, textStatus, errorThrown) { 
    //       $("#google_geo").html(latlon+"地址位置获取失败"); 
    //     } 
    //   }); 
    //baidu
    var url = "<a href='http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location='"+latlon+'&output=json&pois=0>'
    
    //   $.ajax({ 
    //     type: "GET", 
    //     dataType: "jsonp", 
    //     url: url, 
    //       beforeSend: function(){ 
    //         $("#baidu_geo").html('正在定位...'); 
    //       }, 
    //       success: function (json) { 
    //         if(json.status==0){ 
    //           $("#baidu_geo").html(json.result.formatted_address); 
    //         } 
    //       }, 
    //       error: function (XMLHttpRequest, textStatus, errorThrown) { 
    //         $("#baidu_geo").html(latlon+"地址位置获取失败"); 
    //     } 
    //   })
    }
    </script>
    </html>
    

    相关文章

      网友评论

          本文标题:H5获取经纬度

          本文链接:https://www.haomeiwen.com/subject/ajfznftx.html