zoukankan      html  css  js  c++  java
  • 获取用户精准地理位置信息(百度地图)

    获取用户精准地理位置信息步骤:

    1.通过 navigator.geolocation.getCurrentPosition(showPosition, showError); 方法获取经纬度;

    2.使用百度地图坐标转换接口(http://api.map.baidu.com/geoconv/v1/?coords=114.21892734521,29.575429778924&from=1&to=5&ak=你的密钥)转换经纬度;百度地图官方文档:http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition 

    3.使用百度地图逆地理编码服务接口(http://api.map.baidu.com/geocoder/v2/?callback=renderReverse&location=35.658651,139.745415&output=json&pois=1&ak=您的ak)将坐标点(经纬度)转换为对应位置信息(如所在行政区划,周边地标点分布);百度地图官方文档:http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding-abroad

    * 注意两个接口填写的经纬度的顺序不一样:

      坐标转换接口:经度在前,纬度在后(经度,纬度);逆地理编码:纬度在前,经度在后(纬度,经度)

    示例代码:注意引入jQuery文件

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4     <meta charset="utf-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     6     <title>HTML5获取地理位置定位信息</title>
     7     <meta name="keywords" content="html5,地理位置"/>
     8 </head>
     9 <body>
    10 
    11 <div class="demo">
    12     <p>地理坐标:<br/><span id="latlon"></span></p>
    13     <div class="geo">
    14         <p>百度地图定位位置:</p>
    15         <p id="baidu_geo"></p>
    16     </div>
    17 </div>
    18 
    19 <script type="text/javascript" src="js/jquery.min.js"></script>
    20 <script>
    21     function getLocation() {
    22         if (navigator.geolocation) {
    23             navigator.geolocation.getCurrentPosition(showPosition, showError);
    24         } else {
    25             alert("浏览器不支持地理定位...");
    26         }
    27     }
    28 
    29     function showPosition(position) {
    30         $("#latlon").html("纬度:" + position.coords.latitude + ',经度:' + position.coords.longitude);
    31         // 坐标转换:经度在前,纬度在后(经度,纬度)
    32         // 逆地理编码:纬度在前,经度在后(纬度,经度)
    33         var latlon = position.coords.longitude + ',' + position.coords.latitude;
    34         var changeLatlon = '';
    35         // 百度地图坐标转换
    36         var changeUrl = 'http://api.map.baidu.com/geoconv/v1/?coords=' + latlon + '&from=1&to=5&ak=lRRyy6qoBwnAgj3w4ugGFqoSsWC8du3v';
    37         $.ajax({
    38             type: "GET",
    39             dataType: "jsonp",
    40             url: changeUrl,
    41             success: function (json) {
    42                 if (json.status == 0) {
    43                     $.each(json.result,function (i,v) {
    44                         // 逆地理编码:纬度在前,经度在后
    45                         changeLatlon = v.y + ',' + v.x;
    46                     });
    47                     //百度地图逆地理编码
    48                     var url = "http://api.map.baidu.com/geocoder/v2/?ak=lRRyy6qoBwnAgj3w4ugGFqoSsWC8du3v&callback=renderReverse&location=" + changeLatlon + "&output=json&pois=0";
    49                     $.ajax({
    50                         type: "GET",
    51                         dataType: "jsonp",
    52                         url: url,
    53                         beforeSend: function () {
    54                             $("#baidu_geo").html('正在定位...');
    55                         },
    56                         success: function (json) {
    57                             if (json.status == 0) {
    58                                 $("#baidu_geo").html(json.result.formatted_address);
    59                             }
    60                         },
    61                         error: function (XMLHttpRequest, textStatus, errorThrown) {
    62                             $("#baidu_geo").html(changeLatlon + "的地址位置获取失败");
    63                         }
    64                     });
    65                 }
    66             },
    67             error: function (XMLHttpRequest, textStatus, errorThrown) {
    68                 alert("坐标转换失败");
    69             }
    70         });
    71     }
    72 
    73     // 定位失败 传 默认地址
    74     function showError(error) {
    75         switch (error.code) {
    76             case error.PERMISSION_DENIED:
    77                 alert("定位失败,用户拒绝请求地理定位");
    78                 break;
    79             case error.POSITION_UNAVAILABLE:
    80                 alert("定位失败,位置信息不可用");
    81                 break;
    82             case error.TIMEOUT:
    83                 alert("定位失败,请求获取用户位置超时");
    84                 break;
    85             case error.UNKNOWN_ERROR:
    86                 alert("定位失败,定位系统失效");
    87                 break;
    88         }
    89     }
    90 
    91     getLocation();
    92 
    93 </script>
    94 </body>
    95 </html>

    -----------------------------------------END---------------------------------------

  • 相关阅读:
    Makefile学习
    Tmux使用
    Linux进程管理学习资料
    Linux内存管理学习资料
    Python常用的软件包
    Docker 学习
    Intel处理器技术文档
    Firefly-RK3399笔记
    Linux Kernel API
    ARM 技术文档
  • 原文地址:https://www.cnblogs.com/crf-Aaron/p/8962868.html
Copyright © 2011-2022 走看看