html5中文学习网

您的位置: 首页 > html5资讯 > 最新动态 » 正文

简单html5代码获取地理位置_html5教程技巧

[ ] 已经帮助:人解决问题
点评:这篇文章主要介绍了使用html5代码来获取地理位置,具体实现代码如下并附有截图,需要的朋友可以参考下
 JkUHTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
JkUHTML5中文学习网 - HTML5先行者学习网
/** JkUHTML5中文学习网 - HTML5先行者学习网
* 以下为html5代码,获取地理位置 JkUHTML5中文学习网 - HTML5先行者学习网
*/ JkUHTML5中文学习网 - HTML5先行者学习网
function getLocation() { JkUHTML5中文学习网 - HTML5先行者学习网
//检查浏览器是否支持地理位置获取 JkUHTML5中文学习网 - HTML5先行者学习网
if (navigator.geolocation) { JkUHTML5中文学习网 - HTML5先行者学习网
//若支持地理位置获取,成功调用showPosition(),失败调用showError JkUHTML5中文学习网 - HTML5先行者学习网
// alert("正在努力获取位置..."); JkUHTML5中文学习网 - HTML5先行者学习网
var config = { enableHighAccuracy: true, timeout: 5000, maximumAge: 30000 }; JkUHTML5中文学习网 - HTML5先行者学习网
navigator.geolocation.getCurrentPosition(showPosition, showError, config); JkUHTML5中文学习网 - HTML5先行者学习网
} else { JkUHTML5中文学习网 - HTML5先行者学习网
//alert("Geolocation is not supported by this browser."); JkUHTML5中文学习网 - HTML5先行者学习网
alert("定位失败,用户已禁用位置获取权限"); JkUHTML5中文学习网 - HTML5先行者学习网
} JkUHTML5中文学习网 - HTML5先行者学习网
} JkUHTML5中文学习网 - HTML5先行者学习网
/** JkUHTML5中文学习网 - HTML5先行者学习网
* 获取地址位置成功 JkUHTML5中文学习网 - HTML5先行者学习网
*/ JkUHTML5中文学习网 - HTML5先行者学习网
function showPosition(position) { JkUHTML5中文学习网 - HTML5先行者学习网
//获得经度纬度 JkUHTML5中文学习网 - HTML5先行者学习网
var x = position.coords.latitude; JkUHTML5中文学习网 - HTML5先行者学习网
var y = position.coords.longitude; JkUHTML5中文学习网 - HTML5先行者学习网
//配置Baidu Geocoding API JkUHTML5中文学习网 - HTML5先行者学习网
var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b" + JkUHTML5中文学习网 - HTML5先行者学习网
"&callback=renderReverse" + JkUHTML5中文学习网 - HTML5先行者学习网
"&location=" + x + "," + y + JkUHTML5中文学习网 - HTML5先行者学习网
"&output=json" + JkUHTML5中文学习网 - HTML5先行者学习网
"&pois=0"; JkUHTML5中文学习网 - HTML5先行者学习网
$.ajax({ JkUHTML5中文学习网 - HTML5先行者学习网
type: "GET", JkUHTML5中文学习网 - HTML5先行者学习网
dataType: "jsonp", JkUHTML5中文学习网 - HTML5先行者学习网
url: url, JkUHTML5中文学习网 - HTML5先行者学习网
success: function (json) { JkUHTML5中文学习网 - HTML5先行者学习网
if (json == null || typeof (json) == "undefined") { JkUHTML5中文学习网 - HTML5先行者学习网
return; JkUHTML5中文学习网 - HTML5先行者学习网
} JkUHTML5中文学习网 - HTML5先行者学习网
if (json.status != "0") { JkUHTML5中文学习网 - HTML5先行者学习网
return; JkUHTML5中文学习网 - HTML5先行者学习网
} JkUHTML5中文学习网 - HTML5先行者学习网
setAddress(json.result.addressComponent); JkUHTML5中文学习网 - HTML5先行者学习网
}, JkUHTML5中文学习网 - HTML5先行者学习网
error: function (XMLHttpRequest, textStatus, errorThrown) { JkUHTML5中文学习网 - HTML5先行者学习网
alert("[x:" + x + ",y:" + y + "]地址位置获取失败,请手动选择地址"); JkUHTML5中文学习网 - HTML5先行者学习网
} JkUHTML5中文学习网 - HTML5先行者学习网
}); JkUHTML5中文学习网 - HTML5先行者学习网
} JkUHTML5中文学习网 - HTML5先行者学习网
/** JkUHTML5中文学习网 - HTML5先行者学习网
* 获取地址位置失败[暂不处理] JkUHTML5中文学习网 - HTML5先行者学习网
*/ JkUHTML5中文学习网 - HTML5先行者学习网
function showError(error) { JkUHTML5中文学习网 - HTML5先行者学习网
switch (error.code) { JkUHTML5中文学习网 - HTML5先行者学习网
case error.PERMISSION_DENIED: JkUHTML5中文学习网 - HTML5先行者学习网
alert("定位失败,用户拒绝请求地理定位"); JkUHTML5中文学习网 - HTML5先行者学习网
//x.innerHTML = "User denied the request for Geolocation.[用户拒绝请求地理定位]" JkUHTML5中文学习网 - HTML5先行者学习网
break; JkUHTML5中文学习网 - HTML5先行者学习网
case error.POSITION_UNAVAILABLE: JkUHTML5中文学习网 - HTML5先行者学习网
alert("定位失败,位置信息是不可用"); JkUHTML5中文学习网 - HTML5先行者学习网
//x.innerHTML = "Location information is unavailable.[位置信息是不可用]" JkUHTML5中文学习网 - HTML5先行者学习网
break; JkUHTML5中文学习网 - HTML5先行者学习网
case error.TIMEOUT: JkUHTML5中文学习网 - HTML5先行者学习网
alert("定位失败,请求获取用户位置超时"); JkUHTML5中文学习网 - HTML5先行者学习网
//x.innerHTML = "The request to get user location timed out.[请求获取用户位置超时]" JkUHTML5中文学习网 - HTML5先行者学习网
break; JkUHTML5中文学习网 - HTML5先行者学习网
case error.UNKNOWN_ERROR: JkUHTML5中文学习网 - HTML5先行者学习网
alert("定位失败,定位系统失效"); JkUHTML5中文学习网 - HTML5先行者学习网
//x.innerHTML = "An unknown error occurred.[未知错误]" JkUHTML5中文学习网 - HTML5先行者学习网
break; JkUHTML5中文学习网 - HTML5先行者学习网
} JkUHTML5中文学习网 - HTML5先行者学习网
} JkUHTML5中文学习网 - HTML5先行者学习网
/** JkUHTML5中文学习网 - HTML5先行者学习网
* 设置地址 JkUHTML5中文学习网 - HTML5先行者学习网
*/ JkUHTML5中文学习网 - HTML5先行者学习网
function setAddress(json) { JkUHTML5中文学习网 - HTML5先行者学习网
var position = document.getElementById("txtPosition"); JkUHTML5中文学习网 - HTML5先行者学习网
//省 JkUHTML5中文学习网 - HTML5先行者学习网
var province = json.province; JkUHTML5中文学习网 - HTML5先行者学习网
//市 JkUHTML5中文学习网 - HTML5先行者学习网
var city = json.city; JkUHTML5中文学习网 - HTML5先行者学习网
//区 JkUHTML5中文学习网 - HTML5先行者学习网
var district = json.district; JkUHTML5中文学习网 - HTML5先行者学习网
province = province.replace('市', ''); JkUHTML5中文学习网 - HTML5先行者学习网
position.value = province + "," + city + "," + district; JkUHTML5中文学习网 - HTML5先行者学习网
position.style.color = 'black'; JkUHTML5中文学习网 - HTML5先行者学习网
} JkUHTML5中文学习网 - HTML5先行者学习网
JkUHTML5中文学习网 - HTML5先行者学习网
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助