1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
| <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>demo..</title> <script type="text/javascript" src="http://www.npm8.com/jquery.js"></script> <style type="text/css"> .demo{width:560px; margin:60px auto 10px auto} .geo{margin-top:20px} .demo p{line-height:32px; font-size:16px} .demo p span,#baidu_geo,#google_geo{font-weight:bold} </style> </head> <body> <div id="main"> <div class="demo"> <p>地理坐标:<span id="latlon"></span></p> <div class="geo"> <p>百度地图定位位置:</p> <p id="baidu_geo"></p> </div> <div class="geo"> <p>GOOGLE地图定位位置:</p> <p id="google_geo"></p> </div> </div> </div> <script> function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError); } else { alert("浏览器不支持地理定位。"); } }
function showPosition(position) { $("#latlon").html("<br />纬度:" + position.coords.latitude + '<br />经度:' + position.coords.longitude); var latlon = position.coords.latitude + ',' + position.coords.longitude;
var url = "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 + "地址位置获取失败"); } });
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; $.each(results, function(index, array) { if (index == 0) { $("#google_geo").html(array['formatted_address']); } }); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { $("#google_geo").html(latlon + "地址位置获取失败"); } }); }
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; } }
getLocation(); </script> </body> </html>
|