1、第12讲 获取浏览器的地理位置信息,有些应用程序的需要获取用户的地理位置信息，比较经典的例子就是在显示地图时标注自己的当前位置。 过去，获取用户的地理位置信息需要借助第3方地址数据库或专业的开发包（例如，Google Gears API）。 HTML 5定义了Geolocation API规范，可以通过浏览器获取用户的地理位置，这无疑给有相关需求的用户提供了很大的方便。 本章介绍使用HTML5 Geolocation API获取用户的地理位置信息的方法。,本章知识点,12.1 概述 12.2 获取地理位置信息 12.3 数据保护,12.1 概述,12.1.1 什么是浏览器地理位置 12.1.2
2、 浏览器对获取地理位置信息的支持情况,12.1.1 什么是浏览器地理位置,浏览器的地理位置实际上就是安装浏览器的硬件设备的位置，例如经纬度。位置信息的通常来源包括： GPS（全球定位系统），这种方式可以提供很精确的定位，但需要专门的硬件设备，定位效率也不高。 IP地址，多用于计算机设备，定位并不准确。 RFID（Radio Frequency Identification，无线射频标签）。可以通过读卡器的信号、报文到达时间或定位器等等数据确定标签的位置。 WiFi，无线上网时，可以通过WiFi热点（AP或无线路由器）来定位客户端设备。 GSM/CDMA小区标识码，可以根据手机用户的基站数据定位
3、手机设备。 用户输入，除了以上方法外，还可以允许用户自定义位置信息。,12.1.2 浏览器对获取地理位置信息的支持情况,在JavaScript中可以使用navigator.geolocation属性检测浏览器对获取地理位置信息的支持情况。 如果navigator.geolocation等于True，则表明当前浏览器支持获取地理位置信息；否则表明不支持。,【例12-1】,在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持获取地理位置信息。 定义按钮的代码如下： 检测浏览器是否支持获取地理位置信息,单击按钮check将调用check()函数, function check()if(navig
4、ator.geolocation)alert(“您的浏览器支持获取地理位置信息。“);elsealert(“您的浏览器不支持获取地理位置信息。“); ,各主流浏览器对获取地理位置信息的支持情况,备注：实际上并不像书上写的那样，其实只有IE9之上的版本才支持地理定位。,安装下面操作系统的手机设备也支持获取地理位置信息, Android 2.0+ iPhone 3.0+ Opera Mobile 10.1+ Symbian (S60 3rd & 5th generation) Blackberry OS 6 Maemo,12.2 获取地理位置信息,12.2.1 getCurrentPosition
5、()方法 12.2.2 watchPosition()方法 12.2.3 clearWatch()方法,12.2.1 getCurrentPosition()方法,调用getCurrentPosition()方法可以获取地理位置信息，也就是经纬度。getCurrentPosition()方法的语法如下： var retval = geolocation.getCurrentPosition(successCallback, errorCallback, options); 参数说明如下： successCallback，当成功获取地理位置信息时用的回调函数句柄。 回调函数successCall
6、back有一个参数position对象，其中包含获取到的地理位置信息。,参数position对象,回调函数successCallback有一个参数position对象，其中包含获取到的地理位置信息。position对象包含2个属性，如表12-2所示。,coordinates对象的属性,errorCallback，可选参数,当获取地理位置信息失败调用的回调函数句柄。回调函数errorCallback包含一个positionError对象参数，positionError对象包含2个属性，如表12-4所示。,options，可选参数,positionOptions对象，获取用户位置信息的配置参数。p
7、ositionOptions对象的数据格式为JSON，有3个可选的属性，如表12-5所示。,请大家打开【例12-1】,单击按钮获取你的位置信息 获取你的位置信息var x=document.getElementById(“demo“); function getLocation()if (navigator.geolocation)navigator.geolocation.getCurrentPosition(showPosition);elsex.innerHTML=“你的浏览器不支持Geolocation API。“; function showPosition(position)x.i
8、nnerHTML=“纬度: “ + position.coords.latitude + “经度: “ + position.coords.longitude; ,浏览【例12-1】的结果,提示,单击按钮时浏览器会询问用户是否允许该网站获取你的位置信息。单击允许才可以成功获取地理位置信息。 具体情况将在12.3小节中介绍。,示例：利用Google地图来显示当前位置的地图,或者 示例：利用搜狗地图来显示当前位置的地图,利用Google地图来显示当前位置的地图,可以借助下面的链接显示以指定经纬度为中心的Google地图： http:/ sensor=true_or_false,参数说明如下, ce
9、nter，指定地图中心的经纬度，格式为center=,。 size，指定地图的大小，格式为size=x。 zoom，指定地图的缩进程度，格式为zoom =。如果不缩进，则显示一个完整的世界地图。 sensor，指定是否使用传感器来确定用户位置。，格式为sensor=true_or_false。使用计算机浏览Google地图的用户可以将此参数设置为false。因为计算机上通常是没有地理位置传感器的。,请大家打开【例12-2】,改进【例12-1】，使用Google地图显示当前位置。在【例12-1】的网页中增加一个标签，用于显示地图，代码如下：改进showPosition()函数，使用Google地
10、图显示当前位置，代码如下： function showPosition(position)var latlon=position.coords.latitude+“,“+position.coords.longitude;var img_url=“http:/ ,浏览【例12-2】的结果如图12-2,现在各个地图版本不是需要密钥，就是需要翻墙，可能是看不到运行效果的。,12.2.2 watchPosition()方法,调用watchPosition()方法可以监听和跟踪客户端的地理位置信息。watchPosition ()方法的语法如下： var watchId = geolocation.w
11、atchPosition(successCallback, errorCallback, options); watchPosition ()方法的参数与getCurrentPosition()方法的参数相同，请参照12.2.1小节理解。watchPosition()方法和getCurrentPosition()方法的主要区别是它会持续告诉用户位置的改变，所以基本上它一直在更新用户的位置。当你在移动的时候，这个功能会非常有利于追踪用户的位置。,请大家打开【例12-3】,单击按钮获取你的位置信息 获取你的位置信息var x=document.getElementById(“demo“); fun
12、ction getLocation()if (navigator.geolocation)navigator.geolocation.watchPosition(showPosition);elsex.innerHTML=“你的浏览器不支持Geolocation API。“; function showPosition(position)x.innerHTML=“纬度: “ + position.coords.latitude + “经度: “ + position.coords.longitude; ,12.2.3 clearWatch()方法,调用clearWatch()方法可以停止监听和
13、跟踪客户端的地理位置信息。通常与watchPosition()方法结合使用。clearWatch的语法如下： var retval = geolocation.clearWatch(watchId); 参数watchId通常是watchPosition()方法的返回值，接停止该watchPosition()方法对地理位置信息的监听和跟踪。,12.3 数据保护,12.3.1 在Internet Explorer 9中配置共享地理位置 12.3.2 在Chrome中配置共享地理位置 12.3.3 在Firefox中配置共享地理位置,12.3.1 在Internet Explorer 9中配置共享地
14、理位置,用于此站点的选项,如果选择“总是允许”，则会将该站点添加到信任站点中。 下次该站点再获取浏览器地理位置时，将不再询问用户直接允许。 如果选择“总是拒绝且不通知我”，则下次该站点再获取浏览器地理位置时，将不再询问用户直接拒绝。,在“Internet选项”对话框中配置地理位置选项,12.3.2 在Chrome中配置共享地理位置,当Chrome被获取浏览器地理位置时，也会询问用户需要跟踪您的物理位置，是否允许？,提示,只有从Web站点上的网页获取地理位置信息时才会显示次提示条。如果双击打开HTML文件，则会直接拒绝。,拒绝获取地理位置时，在地址栏的右端出现一个图标,单击此图标，会弹出提示对话
15、框,配置地理位置例外,单击“清除这些设置以便日后访问”超链接，可以清除以前关于地理位置的设置单击“管理位置设置”超链接，可以打开“内容设置”页面，配置地理位置例外 。,Chrome设置页面中的“隐私设置”栏目,在Chrome的设置页面中可以找到“隐私设置”栏目,“内容设置”页面,单击“内容设置”按钮，可以打开“内容设置”页面,12.3.3 在Firefox中配置共享地理位置,当Firefox被获取浏览器地理位置时，也会询问用户是否与当前站点共享位置信息。,单击地址栏前面的 图标，会弹出提示对话框,“站点设置”页面,单击“清除这些设置以便日后访问”超链接，可以清除以前关于地理位置的设置单击“管理位置设置”超链接，可以打开“站点设置”页面，选中“权限”，如图12-13所示。,
