html5 判断获取定位,HTML5利用Geolocation API获取地理位置定位功能
如何使用html5地理位置定位功能
定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位,如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的,所以我们在访问该应用时会提示是否允许地理定位,我们当然选择允许即可。
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
alert("浏览器不支持地理定位。");
}
}
上面的代码可以知道,如果用户设备支持地理定位,则运行 getCurrentPosition() 方法。如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象,getCurrentPosition() 方法的第二个参数showError用于处理错误,它规定当获取用户位置失败时运行的函数。
我们先来看函数showError(),它规定获取用户地理位置失败时的一些错误代码处理方式:
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;
}
}
我们再来看函数showPosition(),调用coords的latitude和longitude即可获取到用户的纬度和经度。
function showPosition(position){
var lat = position.coords.latitude; //纬度
var lag = position.coords.longitude; //经度
alert('纬度:'+lat+',经度:'+lag);
}
获取到地理位置就可以百度或者谷歌接口获取位置了,但是准确差别大,勉强吧。
function showPosition(position){
var latlon = position.coords.latitude+','+position.coords.longitude;
//baidu
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+"地址位置获取失败");
}
});
});
谷歌接口:
function showPosition(position){
var latlon = position.coords.latitude+','+position.coords.longitude;
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+"地址位置获取失败");
}
});
}
演示: http://www.jincon.com/download/location/
html5 判断获取定位,HTML5利用Geolocation API获取地理位置定位功能相关推荐
- Python3 利用Virustotal API 获取json格式的分析报告
Python3 利用Virustotal API 获取json格式的分析报告 import requests import json import osAPI="" // your ...
- 利用Windows API获得系统高级功能
利用Windows API获得系统高级功能 邹刚 VB无疑是最先进的编程工具之一,但在涉及windows 32位系统的核心编程方面--譬如一些高级功能的实现上,它仍然显得有些力不从心,这需要我们充分利 ...
- 如何利用百度API地图进行定位,非gps 定位
如果你可以上网,如果你有火狐浏览器,那么恭喜你.你能很容易使用以下代码进行定位! 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用 ...
- android自动获取天气,android通过google api获取天气信息示例
android通过google API获取天气信息 public class WeatherActivity extends Activity { private TextView txCity; p ...
- php获取访问者qq,利用iframe技巧获取访问者qq
今天工作时,有个临时加的好友问我,怎么利用web页面获取访问者的qq. 以前没有接触过,感觉到很好奇,但是工作中脑子很亢奋,转的快,利用所学的知识迅速想到一条技巧,那就是假想用户在进入我们设定的页面前 ...
- 入门练习:利用标准API 获取电影海报图片的 url
获取数据练习:Wikipedia电影海报 背景 练习内容 已知条件: 练习解决方案 总结 背景 新近开始学习数据分析师课程,目前在数据获取阶段.这边记录下自己的课堂练习,也为后面复习留个底. 练习内容 ...
- 开源项目成熟度分析工具-利用github api获取代码库的信息
1.github api github api是http形式的api,功能还是比较丰富的,博主因为项目的原因主要用到的是提取project信息这项功能,返回的数据是JSON格式. api页:https ...
- 利用百度API获取mp3及歌词lrc下载地址
1. [代码]1.通过关键词,获取列表. [html] view plaincopyprint? http://mp3.baidu.com/dev/api/?tn=getinfo&ct=0&a ...
- Python:利用高德API获取公交路线并可视化
前言 查询所在城市所有的公交线路,填入linename数组中(本文只以深圳市68线路为例演示 深圳公交线路查询:深圳公交查询_深圳公交车线路查询_深圳公交地图 - 深圳公交网 (其他城市把拼音处修改即 ...
最新文章
- localBlock在java_将java.util.Date转换为java.time.LocalDate
- 微软 Build 2017 开发者大会:Azure 与 AI 的快速发展
- ArcGIS Pro发布三维场景服务
- 【JavaSE_06】Java中的数组(array)-提高练习
- python最基础_python的最基础的知识点
- DSP之GPIO(转)
- J-1 Java概述
- 把一个人的特点写具体作文_部编版五年级下册语文 第五单元:习作 | 把一个人的特点写具体 电子课本+教案课件...
- twitter storm源码走读(五)
- JDK8的日期时间类3
- Scrapy网络爬虫实战[保存为Json文件及存储到mysql数据库]
- h5 uniapp history模式下刷新页面404
- shelve模块简单用法
- Linux(1)-CentOS7下解决ifconfig command not found
- 图像的放大与缩小——双线性插值放大与均值缩小
- 求解线性方程的数值方法——Matlab中实现算法
- 瑞星搜狐畅游合作 “云安全”首次嵌入网游客户端
- 信息收集工具之hping安装和使用
- 【jetson nano】SD卡驱动挂载到nano板
- SwiftUI 2 redacted新功能超实用的占位符功能(教程含源码)
热门文章
- 关于word粘贴图片无法显示的原因
- 《用AJAX实现图书记录的添加》
- Redis 事务和事务锁
- 《电脑音乐制作实战指南:伴奏、录歌、MTV全攻略》——第2章 音频伴奏的获取与制作 2.1 获取伴奏的途径...
- 南邮计算机学院哪个研究生导师项目比较多,南邮自杀研究生曾抱怨“导师不让毕业” 导师被停职...
- DiCOM文件判断原图是否被翻转(镜像)
- Geohash之范围搜索
- Comarin香豆素标记金纳米团簇|Ce6二氢卟吩标记金纳米团簇|红色荧光的水溶性金纳米团簇(T-Au NCs)
- 中控百傲瑞达系统说明书_百傲瑞达一卡通系统.PDF
- gwr模型用什么做_虎钳的三维模型制作你会吗?用UG软件来做这个轻松搞定