HTML5初窥7--定位
来源:互联网 发布:手机淘宝直通车位置 编辑:程序博客网 时间:2024/05/21 07:48
1.HTML5 Geolocation API 用于获得用户的地理位置。也就是用于定位用户当前的位置。
由于定位会涉及到个人隐私,所以只有在用户同意的情况下才可以定位,否则用户位置信息是不可用的。
在我们的实际生活中,很多APP都带有定位功能的,如果不同意会安装使用不了。这个问题在智能机的时代是很难避免的。
2.Geolocation(地理定位)对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。
3. 使用getCurrentPosition() 方法来获得用户的位置。
实例:(返回当前的经度、纬度)
<script>var x=document.getElementById("demo");function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition)
; } else{x.innerHTML="Geolocation is not supported by this browser.";} }function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; }</script>
代码解析:1)先做一个判断,看看是否支持地理位置定位,如果支持则执行它的getCurrentPosition()方法,如果不支持,则返回:“Geolocation is not suppported by this browser”这句话,告诉用户浏览器不支持。
2)如果getCurrentPosition()方法执行成功,向参数showPosition中规定的函数返回一个coordinates对象。
3)showPosition() 函数获得并显示经度和纬度。
4. 处理错误和拒绝:
getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数:
<!DOCTYPE html><html><body><p id="demo">点击这个按钮,获得您的坐标:</p><button onclick="getLocation()">试一下</button><script>var x=document.getElementById("demo");function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Geolocation is not supported by this browser.";} }function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; }function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } }</script></body></html>
代码解析:通过switch-case分为几种不同的情况:
- Permission denied - 用户不允许定位,则会显示"User denied the request for Geolocation."
- Position unavailable - 无法获取当前位置的情况
- Timeout - 操作超时
5.在地图中显示结果:
如需在地图中显示结果,需要访问可使用经纬度的地图服务,比如谷歌地图或者百度地图。
<!DOCTYPE html><html><body><p id="demo">点击这个按钮,获得您的位置:</p><button onclick="getLocation()">试一下</button><div id="mapholder"></div><script>var x=document.getElementById("demo");function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Geolocation is not supported by this browser.";} }function showPosition(position) { var latlon=position.coords.latitude+","+position.coords.longitude; var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />"; }function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } }</script></body></html>
在这个例子中,使用返回的经纬度数据在谷歌地图中显示位置(使用静态图像)。6. 地理定位对于给定位置的信息也是很有用处的:
- 更新本地信息
- 显示用户周围的兴趣点
- 交互式车载导航系统 (GPS)
若成功,则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用,则会返回其他下面的属性。(表示没有看明白。。。。。。。。。。。。)
8.Geolocation 对象 - 其他方法
1)watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。
2)clearWatch() - 停止 watchPosition() 方法
实例:<!DOCTYPE html><html><body><p id="demo">点击这个按钮,获得您的坐标:</p><button onclick="getLocation()">试一下</button><script>var x=document.getElementById("demo");function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} }function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; }</script></body></html>
*****注意:需要用一台精确的GPS设备来进行这个例子的测试,比如苹果手机。
getCurrentPosition() 方法 - 返回数据
若成功,则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用,则会返回其他下面的属性。(表示没有看明白。。。。。。。。。。。。)
- HTML5初窥7--定位
- html5定位
- Html5定位
- html5定位
- HTML5开发 地理位置定位
- HTML5 地理定位
- HTML5 地理定位
- HTML5 - 使用地理定位
- HTML5 地理位置定位
- Lesson09:HTML5 地理定位
- HTML5 地理定位
- HTML5 地理定位
- HTML5的定位接口
- HTML5 地理定位
- HTML5定位+百度地图
- html5 地理定位
- html5---百度地图定位
- HTML5地理位置定位 lbs
- android振动效果的实现
- Libevent源码分析-----evbuffer结构与基本操作
- ubuntu-12.04-LAMP搭建-apache2.4.7虚拟机配置
- 用Buildout来构建Python项目
- 第五周上机实践项目3-用多文件组织多个类的程序
- HTML5初窥7--定位
- 指针数组与数组指针
- 软件设计
- 改习题2-10
- JfreeChart折线图
- 第二章第16题
- JAVA的可变类与不可变类
- 如何将mysql的默认datadir改变成自己想要的路径
- mybatis实战教程(mybatis in action),mybatis入门到精通