html5中地理位置定位api接口开发应用小结_html5_网页制作

HTML 5提供了地理位置等一系列API可以给用户使用，方便用户制作LBS的地理应用，首先在支持HTML 5的浏览器中，当开启API时，会询问是否用户同意使用api，否则不会开启的，保证安全

地理位置定位的几种方式：IP地址，GPS，Wifi，GSM/CDMA 地理位置获取流程： 1、用户打开需要获取地理位置的web应用。 2、应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。 3、假设用户允许，浏览器从设别查询相关信息。 4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。 HTML5地理地位的实现： 1. 实现基于浏览器（无需后端支持）获取用户的地理位置技术 2. 精确定位用户的地理位置( 精度最高达10m之内，依赖设备 ) 3. 持续追踪用户的地理位置 4. 与 Google Map、或者 Baidu Map 交互呈现位置信息 Geolocation API 用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐私安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是“允许” or “拒绝”。 先看看哪些浏览器支持Geolocation API： IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+ Geolocation API存在于navigator对象中，只包含3个方法： 复制代码代码如下: 1、getCurrentPosition //当前位置 2、watchPosition //监视位置 3、clearWatch //清除监视 navigator.geolocation.getCurrentPosition( … , function(error){ switch(error.code){ case error.TIMEOUT : alert( \” 连接超时，请重试 \” ); break; case error.PERMISSION_DENIED : alert( \” 您拒绝了使用位置共享服务，查询已取消 \” ); break; case error.POSITION_UNAVAILABLE : alert( \” ，抱歉，暂时无法为您所在的星球提供位置服务 \” ); break; } }); watchPosition像一个追踪器与clearWatch成对。 watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。 var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options); navigator.geolocation.clearWatch(watchPositionId );HTML 5提供了地理位置等一系列API可以给用户使用，方便用户制作LBS的地理应用，首先在支持HTML 5的浏览器中，当开启API时，会询问是否用户同意使用api，否则不会开启的，保证安全。 1、开启，判断是否浏览器支持LBS api 复制代码代码如下: function isGeolocationAPIAvailable() { var location = \”No, Geolocation is not supported by this browser.\”; if (window.navigator.geolocation) { location = \”Yes, Geolocation is supported by this browser.\”; } alert(location); } 上面的例子中，还在displayError方法中，捕捉了异常； 2、获得用户的地理位置 这个使用getCurrentPosition就可以了； 复制代码代码如下: function requestPosition() { if (nav == null) { nav = window.navigator; } if (nav != null) { var geoloc = nav.geolocation; if (geoloc != null) { geoloc.getCurrentPosition(successCallback); } else { alert(\”Geolocation API is not supported in your browser\”); } } else { alert(\”Navigator is not found\”); } } 当获得地理位置成功后，会产生一个回调方法了，处理返回的结果， 复制代码代码如下: function setLocation(val, e) { document.getElementById(e).value = val; } function successCallback(position) { setLocation(position.coords.latitude, \”latitude\”); setLocation(position.coords.longitude, \”longitude\”); } 3、一个很常见的问题，是如何跟踪用户不断变化的地理位置，这里小结下其中用到的两个api 1 watchPosition 例子如下： 复制代码代码如下: function listenForPositionUpdates() { if (nav == null) { nav = window.navigator; } if (nav != null) { var geoloc = nav.geolocation; if (geoloc != null) { watchID = geoloc.watchPosition(successCallback); } else { alert(\”Geolocation API is not supported in your browser\”); } } else { alert(\”Navigator is not found\”); } } 然后在successCallback中，就可以设置显示最新的地理位置： 复制代码代码如下: function successCallback(position){ setText(position.coords.latitude, \”latitude\”); setText(position.coords.longitude, \”longitude\”); } 如果不希望实时跟踪，则可以取消之： function clearWatch(watchID) { window.navigator.geolocation.clearWatch(watchID); } 4、如何处理异常 当遇到异常时，可以捕捉之： 复制代码代码如下: if (geoloc != null) { geoloc.getCurrentPosition(successCallback, errorCallback); } function errorCallback(error) { var message = \”\”; switch (error.code) { case error.PERMISSION_DENIED: message = \”This website does not have permission to use \” + \”the Geolocation API\”; break; case error.POSITION_UNAVAILABLE: message = \”The current position could not be determined.\”; break; case error.PERMISSION_DENIED_TIMEOUT: message = \”The current position could not be determined \” + \”within the specified timeout period.\”; break; } if (message == \”\”) { var strErrorCode = error.code.toString(); message = \”The position could not be determined due to \” + \”an unknown error (Code: \” + strErrorCode + \”).\”; } alert(message); } 5、 在google 地图上显示位置（前提是有google map api等设置好） 复制代码代码如下: function getCurrentLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showMyPosition,showError); } else { alert(\”No, Geolocation API is not supported by this browser.\”); } } function showMyPosition(position) { var coordinates=position.coords.latitude+\”,\”+position.coords.longitude; var map_url=\”http://maps.googleapis.com/maps/api/staticmap?center=\” +coordinates+\”&zoom=14&size=300×300&sensor=false\”; document.getElementById(\”googlemap\”).innerHTML=\”<img src=\’\”+map_url+\”\’ />\”; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: alert(\”This website does not have permission to use the Geolocation API\”) break; case error.POSITION_UNAVAILABLE: alert(\”The current position could not be determined.\”) break; case error.TIMEOUT: alert(\”The current position could not be determined within the specified time out period.\”) break; case error.UNKNOWN_ERROR: alert(\”The position could not be determined due to an unknown error.\”) break; } }
本文为网络共享文章，如有侵权请联系邮箱485837881@qq.com