HTML5权威指南 15.获取地理位置信息

 1             navigator.geolocation.getCurrentPosition(function(position){
 2                 var coords=position.coords;
 3                 console.log(coords.latitude,coords.longitude,coords.accuracy);
 4             },
 5             //捕捉错误信息
 6             function(error){
 7                 var errorType={
 8                     1:‘位置服务被拒绝‘,
 9                     2:"获取不到位置信息",
10                     3:"获取信息超时"
11                 };
12                 alert(errorTypes[error.code]+":不能获取你的当前地理位置");
13             })

 1 <!DOCTYPE html>
 2 <html>
 3
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <script type="text/javascript">
 8             function showObject(obj, k) {
 9                 //递归显示Object
10                 if(!obj) { return; }
11                 for(var i in obj) {
12                     if(typeof(obj[i] != "object" || obj[i] == null)) {
13                         for(var j = 0; j < k; j++) {
14                             document.write("&nbsp;&nbsp;&nbsp;&nbsp;");
15                         }
16                         document.write(i + ":" + obj[i] + "<br/>");
17                     } else {
18                         document.write(i + ":<br/>");
19                         showObject(obj[i], k + 1);
20                     }
21                 }
22             }
23
24             function get_location() {
25                 if(navigator.geolocation)
26                     navigator.geolocation.getCurrentPosition(show_map, handle_error, { enableHighAccuracy: true, maximumAge: 1000 });
27                 else
28                     alert("不支持");
29             }
30
31             function handle_error(err) {
32                 //错误处理
33                 switch(err.code) {
34                     case 1:
35                         alert("位置服务被拒绝");
36                         break;
37                     case 2:
38                         alert("位置服务被拒绝");
39                         break;
40                     case 3:
41                         alert("位置服务被拒绝")
42                         break;
43                     default:
44                         alert("未知错误")
45                         break;
46                 }
47             }
48
49             function show_map(position) {
50                 //显示地理信息
51                 var latitude = position.coords.latitude;
52                 var longitude = position.coords.longitude;
53                 showObject(position, 0);
54             }
55             get_location();
56         </script>
57     </head>
58
59     <body>
60         <div id="map" style="width: 400px; height: 400px;"></div>
61     </body>
62
63 </html>

时间: 2024-12-29 01:05:02

HTML5权威指南 15.获取地理位置信息的相关文章

Html5 Geolocation获取地理位置信息(转)

Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. Html5获取地理位置信息是通过Geolocation API提供,使用其getCurrentPosition方法,此方法中有三个参数,分别是成功获取到地理位置信息时所执行的回调函数,失败时所执行的回调函数和可选属性配置项. 如下Demo演示了通过Geolocation获取地理位置信息,并在百度地

html5获取地理位置信息API

在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位置的信息,该API可以应用在移动设备上的地理定位:为window.navigator 对象新增了一个geolocation属性,可以使用Geolocation API来对该属性进行访问.window.navigator对象中的geolocation属性有三个方法如下: 第一个方法是:getCurrentPosition 该方法来取得

HTML5 获取地理位置信息

Geolocation API的基本知识 在HTML5中,为window.navigator对象新增了一个geolocation属性,可以使用Geolocation API来对该属性进行访问.window.navigator对象的geolocation属性存在三个方法. 取得当前地理位置 可以使用getCurrentPosition()方法来取得用户当前的地理位置信息,该方法的定义如下: Js代码 收藏代码 void getCurrentPosition(onSuccess, onError,

通过window.navigator对象获取地理位置信息并在百度地图上显示

通过window.navigator对象获取地理位置信息 Geolocation API:用户可共享地理位置,并在Web应用的协助下享用位置感知服务(location-aware services) window.navigator下的geolocation 对象的 getCurrentPosition 方法可以获取当前位置.getCurrentPosition 方法将发起对位置信息的异步请求并将立即返回.如果该请求成功完成,则调用用来实现位置数据接收的成功回调. 下面演示如何调用 getCur

HTML5权威指南 中文版 高清PDF扫描版?

HTML5权威指南是一本系统学习网页设计的权威参考图书.<HTML5权威指南>分为五部分:第一部分介绍学习本书的预备知识和HTML.CSS和JavaScript的最新进展:第二部分讨论HTML元素,并详细说明了HTML5中新增和修改的元素:第三部分阐述CSS,涵盖了所有控制内容样式的CSS选择器和属性,并辅以大量代码示例和图示:第四部分介绍DOM,剖析如何用JavaScript操纵HTML内容:第五部分讲解Ajax.多媒体和canvas元素等HTML5高级特性. <HTML5权威指南&g

Android 获取地理位置信息 封装好了 直接用

前言:花了一个早上研究了以下android获取经纬度,然后网上的参考资料都是杂七杂八,基本上都是过去几年的,现在我用 android6.0参照别人的结果发生好多错误,我的内心几乎是崩溃的.后来,不断百度,不断goole,不断查找资料,终于解决了,而且完美打包,以后直接用就可以了. 1.这个类原来是用kotlin写的,后来有些东西和java又不同,索性就改成java吧,反正他们兼容性很强-----封装的类名为:LocationUtil package com.example.jason_jan.g

[iOS]获取地理位置信息

1.在工程的 info.plist 文件中增加两个key( 右键 - Add Row ) Privacy - Location Always and When In Use Usage Description Privacy - Location When In Use Usage Description value里输入征求获取位置信息时展示的提示语: 2.在需要获取地理位置信息的文件中 #import <CoreLocation/CoreLocation.h> 在interfce行添加相关

HTML5获取地理位置信息

<!DOCTYPE html> <html> <head> <title>Location</title> <meta charset="utf-8"> </head> <body> <input type="button" id="btnLocation" value="获取位置信息"> </body> &

HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是cookie有下面几个问题: a:大小:cookies的大小被限制在4KB b:带宽:cookies随HTTP事务一起被发送,因此会浪费一部分发送的cookies时使用的带宽. c:复杂性:要正确的操纵cookies是很困难的. Web Storage分为两种: <1>sessionStorage 将数