简单html5代码获取地理位置


Posted in HTML / CSS onMarch 31, 2014

简单html5代码获取地理位置 

复制代码
代码如下:

/**
* 以下为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';
}
HTML / CSS 相关文章推荐
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
css3一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
HTML5注册页面示例代码
Mar 27 #HTML / CSS
html5实现微信打飞机游戏
Mar 27 #HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 #HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 #HTML / CSS
用html5实现语音搜索框的方法
Mar 18 #HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 #HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 #HTML / CSS
You might like
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
js调用css属性写法
2013/09/21 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
react项目从新建到部署的实现示例
2021/02/19 Javascript
windows下python之mysqldb模块安装方法
2017/09/07 Python
Python多项式回归的实现方法
2019/03/11 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
同程旅游英文网站:LY.com
2018/11/13 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
经典c++面试题三
2015/07/08 面试题
PyQt 如何创建自定义QWidget
2021/03/24 Python
幼儿园教师工作制度
2014/01/22 职场文书
交通事故私了协议书
2014/04/16 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
超市员工管理制度
2015/08/06 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers