html5代码,获取地理位置
2015-12-23 15:59
686 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <title>大名</title> <meta content="yes" name="apple-mobile-web-app-capable"/> <meta content="black" name="apple-mobile-web-app-status-bar-style"/> <meta content="telephone=no" name="format-detection"/> </head> <body> 2121212121212wwwwwwwwwww <button id="testbutton">测试按钮</button> <script type="text/javascript"> /** * 以下为html5代码,获取地理位置 */ function getLocation() { //检查浏览器是否支持地理位置获取 if (navigator.geolocation) { //若支持地理位置获取,成功调用showPosition(),失败调用showError // alert("正在努力获取位置..."); var config = { enableHighAccuracy: true, timeout: 5000, maximumAge: 30000 }; navigator.geolocation.getCurrentPosition(showPosition, showError, config); } else { //alert("Geolocation is not supported by this browser."); alert("定位失败,用户已禁用位置获取权限"); } } /** * 获取地址位置成功 */ function showPosition(position) { //获得经度纬度 var x = position.coords.latitude; var y = position.coords.longitude; //配置Baidu Geocoding API var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b" + "&callback=renderReverse" + "&location=" + x + "," + y + "&output=json" + "&pois=0"; $.ajax({ type: "GET", dataType: "jsonp", url: url, success: function (json) { if (json == null || typeof (json) == "undefined") { return; } if (json.status != "0") { return; } setAddress(json.result.addressComponent); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert("[x:" + x + ",y:" + y + "]地址位置获取失败,请手动选择地址"); } }); } /** * 获取地址位置失败[暂不处理] */ function showError(error) { switch (error.code) { case error.PERMISSION_DENIED: alert("定位失败,用户拒绝请求地理定位"); //x.innerHTML = "User denied the request for Geolocation.[用户拒绝请求地理定位]" break; case error.POSITION_UNAVAILABLE: alert("定位失败,位置信息是不可用"); //x.innerHTML = "Location information is unavailable.[位置信息是不可用]" break; case error.TIMEOUT: alert("定位失败,请求获取用户位置超时"); //x.innerHTML = "The request to get user location timed out.[请求获取用户位置超时]" break; case error.UNKNOWN_ERROR: alert("定位失败,定位系统失效"); //x.innerHTML = "An unknown error occurred.[未知错误]" break; } } /** * 设置地址 */ function setAddress(json) { var position = document.getElementById("txtPosition"); //省 var province = json.province; //市 var city = json.city; //区 var district = json.district; province = province.replace('市', ''); position.value = province + "," + city + "," + district; position.style.color = 'black'; } var button = document.getElementById("testbutton"); button.onclick = function(){ getLocation(); } </script> </body> </html>
相关文章推荐
- html5中localStorage存储
- html5学习_MyFirstWebPage_语法的概念与框架
- HTML5入门十一---Canvas画布实现画图(二)
- HTML5入门十---Canvas画布实现画图(一)
- 今天一天解决了一个 ph56w-opcache问题 (yum 命令方式)
- HTML5产品360度旋转展示特效
- 关于HTML5标签不兼容(IE6~8)
- 使用余弦定理制作磁盘形状h5音乐播放器
- Input标签新增的属性&Range调背景色
- h5 sessionStorage localStorage存储
- 7款高颜值HTML5播放器:让你的音乐有声有色
- 自定义网页QQ登录按钮
- 人生不会亏待你,越努力,越幸运
- HTML5开发中Access-Control-Allow-Origin跨域问题
- 关于HTML5标签不兼容(IE6~8)
- HTML5入门九---Canvas画布
- H5相关
- HTML5入门八---缓存控件元素的值
- HTML5 <script>元素async,defer异步加载
- HTML5之embed 播放音频