通过代码示例跟我学html5相关技术——在html5中如何获取地理位置信息及应用实例第1部分

通过代码示例跟我学html5相关技术——在html5中如何获取地理位置信息及应用实例第1部分内容摘要：

olocationDataDivTagID39。 ).innerHTML = geolocationDataString。 } function successGeolocationPositionData(geolocationPositionObject) { showGeolocationPositionData(, )。 } 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 10/27 页 10 function errorGetGeolocationPositionData(geolocationPositionErrorObject) { (39。 showGeolocationDataDivTagID39。 ).innerHTML = 错误编码为： + + ，错误信息为： +。 } /script /body /html （ 2）在 IE9 中执行的结果 如果是移动设备上的 HTML5 应用，可以通过设置 enableHighAcuracy 参数为 true，调用设备的 GPS 定 位来获取高精度的地理位置信息。 （ 3）在 FireFox 中的执行结果 如果点击其中的“详细了解”的超链接，将出现下面的说明文字： 而如果点击其中的“共享位置信息”的链接，将出现下面的结果： 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 11/27 页 11 数据出现差别是由于在不同地方执行的结果（前面是在科学园南里，后面是在中关村）。 （ 4）在 Google 的 Chrome 浏览器中执行的结果 但在 Google 的 Chrome 浏览器中执行后，出现下面禁止获得位置服务的提示信息 ——点击 URL 地址 3 栏右端的“叉号”按钮，将会弹出下面的警告信息提示框。 （ 5）在 Google 的 Chrome 浏览器中设置允许获得位置信息 点击 Chrome 浏览器右端的“ ”按钮，将出现下面的菜单 选择其中的“设置”菜单项目，然后在弹出的对话框的下半部分点击选择“显示高级设置”按钮。 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 12/27 页 12 在“高级设置”对话框中的“隐私设置”栏中点击“内容设置”按钮，展开“隐私内容设置”。 在“隐私内容设置”页面导航到“位置”设置项目，选择其中的“允许所有网站跟踪我的地理位置”项，然后再点击其中的“确定”或者“完成”按钮以最终保存设置。 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 13/27 页 13 但仍然不管用，继续出现前面的“错误编码为： 1， 错误信息为： User denied Geolocation”。 不知道是什么原因。 （ 6）在 IE8 等不支持的浏览器中浏览的效果： 由于 HTML5 Geolocation 只能帮助开发者获取用户的“纬度”和“经度”方面的数据，而无法获取到更加详细的用户位置数据 —— 比如国家代码、城市等等。 一般在实际项目开发中，需要借助第三方工具（比如 Google Map 或者百度地图）来完成这样的需求。 持续跟踪获取用户的地理位置信息 持续跟踪获取用户的地理位置信息示例 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 14/27 页 14 !DOCTYPE html html head meta equiv=ContentType content=text/html。 charset=gb18030 title持续跟踪获取用户的地理位置信息示例 /title /head body div id=showGeolocationDataDivTagIDdiv input type=button value= 启 动 持 续 跟 踪 onClick=startWatchGeolocationPositionData()。 / input type=button value= 终 止 持 续 跟 踪 onClick=closeWatchGeolocationPositionData()。 / script type=text/javascript var watchPositionId。 function startWatchGeolocationPositionData(){ watchPositionId = (successGeolocationPositionData, errorGetGeolocationPositionData, {maximumAge:60000})。 } function closeWatchGeolocationPositionData(){ if (watchPositionId){ (watchPositionId)。 } } function showGeolocationPositionData(latitudeValue, longitudeValue) { var geolocationDataString = 39。 您当前的地理位置中的纬度： 39。 + latitudeValue + 39。 ，经度： 39。 + longitudeValue。 (39。 showGeolocationDataDivTagID39。 ).innerHTML = 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 15/27 页 15 geolocationDataString。 } function successGeolocationPositionData(geolocationPositionObject) { showGeolocationPositionData(, )。 } function errorGetGeolocationPositionData(geolocationPositionErrorObject) { (39。 showGeolocationDataDivTagID39。 ).innerHTML = 错误编码为： + + ，错误信息为： +。 } /script /body /html 根据获得的纬度与经度值最终在 Google 地图中显示出 （ 1）实现的基本原理 依据 HTML5 Geolocation API 获得用户浏览器所在的地理位置数据后，如果再与 Google Map API 相互结合，最终实现在 Google Map 地图中标示出用户的当前位置。 主要的实现流程如下： 1) 首先，需要在页面中引用 Google Map API 的脚本文件 2) 其次，设定地图参数 3) 最后，创建地图，并在页面中显示 （ 2）代码示例 下面代码示例中的“ Google 地图 Javascript API 文件所在的 URL 位置，该文件会载入使用第 3 版 Google Maps API 所需的全部符号和定义。 其中的 sensor 参数用于指明此应用 程序是否使用传感器确定用户的位置，如果应用程序是通过使用的传感器（如 GPS 定位仪）来确定用户的位置，就设为 true。 一般我们不做移动设备开发的话都设置为 false。 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 16/27 页 16 !DOCTYPE html html head meta equiv=ContentType content=text/html。 charset=gb18030。