`
黄继华
  • 浏览: 46522 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

基于 html5 geolocation来获取经纬度地址

 
阅读更多

以前如果要获取互联网用户所在地都是根据用户的IP地址来获取地理位置,这样获取到的数据和真实数据有很大的偏差。为了获取更加精确的位置,可以使用了html5的geolocation来获取经纬度,然后再获取所在地理位置,如何获取,我在下面会说到。先说下基本概念。

  Geolocation在的navigator 对象中,我们可以通过 navigator.geolocation 来使用它。不支持 geolocation 的浏览器并不包含这一对象,那么可以通过下面的代码来做能力检测,对不同的浏览器做不同的处理。在访问 geolocation 对象时,即调用 geolocation 下面的方法时,浏览器会弹出提示,询问用户是否许可网站提供的位置服务,只有在得到用户许可过后,服务才会继续,否则将被停止。 

  常用的navigator.geolocation对象有以下三种方法:

  获取当前地理位置:navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)

  持续获取地理位置:navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)

  清除持续获取地理位置事件:navigator.geolocation.clearWatch(watch_position_id)  

  参数position_options是配置项,由JSON格式传入:

  enableHighAccuracy:true/false,它将告诉浏览器是否启用高精度设备,所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI,值为 true 的时候,浏览器会尝试启用这些设备,默认指为 true,在这种情况下,浏览器会尽可能地进行更为精确的查询,简单地说,如果用户有可用的 GPS 设备,会返回 GPS 设备的查询结果,IP 是最后的选择,对于移动设备来说,网络接入点(基站)或许成为另一个选择,对此我还没有完全了解,但根据测试,即时没有任何额外功能的手机,也能够得到更为精确的查询结果。

  maximumAge:单位毫秒,告诉设备缓存时间,主要用于设备的省电或者节省带宽方面。

  timeout:单位毫秒,超时事件,获取位置信息时超出设定的这个时长,将会触发错误,捕获错误的函数将被调用,并且错误码指向TIMEOUT。

?
varposition_option = {
enableHighAccuracy: true,
maximumAge: 30000,
timeout: 20000
};
navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError, position_option);
?
functiongetPositionSuccess( position ){
varlat = position.coords.latitude;
varlng = position.coords.longitude;
alert( "您所在的位置: 纬度"+ lat + ",经度"+ lng );
if(typeofposition.address !== "undefined"){
varcountry = position.address.country;
varprovince = position.address.region;
varcity = position.address.city;
alert(' 您位于 '+ country + province + '省'+ city +'市');
}
}

coords其他返回信息:

coords.accuracy:返回经纬度的精度(米)

coords.speed :速度

coords.altitude :当前的高度,海拔(米)

coords.altitudeAccuracy:高度的精度(米)

coords.heading:朝向

?
functiongetPositionError(error) {
switch(error.code) {
caseerror.TIMEOUT:
alert("连接超时,请重试");
break;
caseerror.PERMISSION_DENIED:
alert("您拒绝了使用位置共享服务,查询已取消");
break;
caseerror.POSITION_UNAVAILABLE:
alert("获取位置信息失败");
break;
}
}
分享到:
评论

相关推荐

    leaflet 获取经纬度.rar

    这个“leaflet 获取经纬度.rar”压缩包显然是为了帮助开发者实现一个功能,即在Leaflet地图上点击时获取到相应的经纬度坐标。 在Leaflet中,获取地图上的经纬度主要依赖于地图的“click”事件监听器。当用户在地图...

    百度地图 获取经纬度的html页面.7z

    总的来说,通过学习这个示例,我们可以掌握在HTML页面中集成百度地图API以获取经纬度的基本方法,这对于开发定位相关的Web应用非常有用。记住,始终要遵循合法和合规的数据使用原则,尊重用户隐私。

    基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)

    3. 获取经纬度:当浏览器获取到位置信息时,会回调给定的函数,通过`position.coords.longitude`和`position.coords.latitude`分别获取到用户的经度和纬度。 4. 第三方地图服务API:在获取到经纬度后,可以使用第三...

    Python-Seeker利用HTML5JavascriptJQuery和PHP以高精度获取设备信息和GeoLocation

    Python-Seeker是一个利用HTML5、JavaScript、jQuery和PHP技术构建的工具,旨在高精度地获取用户设备的各种信息,包括但不限于地理位置(GeoLocation)。这个项目主要面向开发者,特别是对网络应用监控、数据分析或...

    js 获取经纬度的实现方法

    文档中涉及了使用Google Maps API来获取经纬度的技术。Google Maps API 提供了一组丰富的工具和接口,其中的地理位置API允许网页通过JavaScript访问用户的地理位置信息。这些信息可以用于网页中地图展示、位置服务等...

    Html5 Geolocation获取地理位置信息实例

    HTML5 Geolocation是HTML5提供...以上就是HTML5 Geolocation获取地理位置信息实例的主要知识点。通过这些知识点,开发者可以更好地利用HTML5 Geolocation进行位置信息相关的Web开发,创建更丰富的交互式位置服务应用。

    html5定位获取当前位置并在百度地图上显示

    HTML5定位技术是现代网页开发中的一个重要特性,它允许网页应用程序获取用户设备的地理位置信息,为用户提供更加个性化和精准的服务。这项技术主要依赖于Geolocation API,它在浏览器环境中提供了获取用户位置的能力...

    利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位

    HTML5的Geolocation API是现代Web开发中用于获取设备地理位置信息的重要工具,它允许网页应用获取用户的精确位置,如经纬度、海拔等。这个API在移动应用和地图服务中尤其常见,例如集成Google Maps API来展示用户的...

    HTML5 Geolocation API的正确使用方法

    HTML5 Geolocation API是Web开发中的一个重要工具,它允许网页应用程序获取访问设备的地理位置信息,如经纬度坐标、高度、速度等。这个API是HTML5标准的一部分,为开发者提供了无须借助外部插件就能实现地理位置服务...

    基于js实现百度地图api定位当前位置和获取经度和纬度

    调用`BMap.Geolocation`对象的`getCurrentPosition`方法来获取用户的位置。这个过程是异步的,所以我们需要提供一个回调函数来处理定位结果: ```javascript var geolocation = new BMap.Geolocation(); ...

    利用百度地图查询经纬度代码

    综上所述,这个项目涵盖了前端通过HTML5 Geolocation API获取用户实时位置,以及后端使用百度地图API进行地理编码以获取经纬度的相关技术。无论是前端还是后端,都需要对地理位置处理有一定的理解,并能熟练运用相关...

    html5 地图动态客流流向显示图

    总的来说,构建HTML5地图动态客流流向显示图涉及到的技术点包括HTML5 Canvas绘图、Geolocation API获取位置信息、地图服务集成、JavaScript库的应用以及Ajax数据交互。通过熟练掌握这些技术,开发者可以创建出既实用...

    网页获取百度地图的经纬度代码

    如果你需要在页面加载时自动获取当前位置的经纬度,可以使用百度地图的Geolocation服务: ```javascript var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ if(this.get...

    HTML5地理位置定位

    - **Wi-Fi和蓝牙MAC地址**:利用附近的Wi-Fi热点或蓝牙设备的MAC地址来定位,特别适合于室内定位。 #### 知识点三:坐标系统的理解 - **坐标系统的工作原理**:包括地心坐标系统和参考椭球体(Datums),用于将...

    PHP谷歌地图API

    3. **解析经纬度**:在获取了IP对应的地理位置后,可能需要进一步解析出具体的经纬度坐标,以便在地图上准确标出位置。这可以通过Google Maps Geocoding API完成,提供一个地址或位置名称,API将返回其对应的经纬度...

    html5地图定位

    在本文档中,我们将详细探讨如何利用HTML5的Geolocation API结合百度地图API来实现用户当前位置的获取与显示。通过一个具体的示例代码,我们将一步步了解整个过程。 #### 二、Geolocation API详解 Geolocation API...

    PhoneGap,API帮助文档翻译整理9-Geolocation_(定位)

    成功获取到位置后,将在页面上显示一个基于 Google Maps 的静态地图,中心位于设备的经纬度。如果出现错误,将显示一个包含错误信息的警告框。 这个 API 在多个平台上支持,包括 Android、BlackBerry 4.6 及更高...

    html5获取位置服务

    这项功能基于W3C的Geolocation API标准,适用于移动设备和桌面浏览器,只要浏览器支持HTML5,就可以利用这一特性。 1. **Geolocation API** Geolocation API 是HTML5中的一个核心组件,它提供了获取用户地理位置的...

    HTML 5基础之HTML 5 API的威力

    HTML5 API是基于HTML5标准的一系列编程接口的集合,它们使得开发者能够创建更加动态、交互性强的Web应用。这些API覆盖了多媒体处理、本地存储、数据传输等多个方面,极大地丰富了Web应用的功能。 #### 三、HTML5 ...

Global site tag (gtag.js) - Google Analytics