• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Geolocation
 

Geolocation

on

  • 313 views

 

Statistics

Views

Total Views
313
Views on SlideShare
313
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Geolocation Geolocation Presentation Transcript

    • HTML5 开发Web,MobileWeb & Apps范圣刚安博中程在线
    • Geolocation定位和跟踪
    • 介绍安博中程在线Geolocation工作原理Geolocation APIExample扩展阅读··getCurrentPosition方法Geolocation数据Handling ErrorsPositionOptions对象watchPosition()方法和clearWatch()方法-----··3/14
    • Geolocation工作原理识别地理位置的主要方法:安博中程在线通过IP地址利用基站获取手机网络的接入位置通过利用卫星定位获得经纬度信息的GPS设备···4/14
    • Geolocation API可以获得用户所在地理位置的经纬度信息调用Geolocation API从全局navigator对象的geolocation属性开始:navigator.geolocation安博中程在线<scripttype=text/javascript>//最简单的使用方式:没有做任何的检测,错误处理,也没有选项参数functionfind_my_location(){navigator.geolocation.getCurrentPosition(show_map);}</script>JAVASCRIPT5/14
    • Geolocation API检测浏览器是否支持地理位置API方法1: 检测检测 全局对象navigator是否具有geolocation属性方法2: 使用Modernizr提供的方法 检测检测安博中程在线<script type=text/javascript>function supports_geolocation() {return !!navigator.geolocation;}</script>JAVASCRIPT<script type=text/javascript>function find_my_location() {if (Modernizr.geolocation) {navigator.geolocation.getCurrentPosition(show_map);} else {// 浏览器没有提供原生支持,使用回退方案}}</script>JAVASCRIPT6/14
    • Geolocation APIgetCurrentPosition()使用getCurrentPosition()方法 获取当前位置信息获取当前位置信息 .安博中程在线<script type=text/javascript>function find_my_location() {if (Modernizr.geolocation) {navigator.geolocation.getCurrentPosition(show_map);} else {// 其他方案}}function show_map(position) {var latitude = position.coords.latitude;var longitude = position.coords.longitude;alert(Lat: + latitude + Lon: + longitude);}</script>JAVASCRIPT7/14
    • Position数据成功的回调函数的参数是一个Position对象,包括coords和timestamp两个属性。属性 类型 备注coords.latitude double 纬度(度)coords.longitude double 经度(度)coords.accuracy double 精度(米)coords.altitude double或null 海拔(米)coords.altitudeAccuracy double或null 海拔精度(米)coords.heading double或null 度(顺时针,以正北为基准)coords.speed double或null 米/秒timestamp DOMTimeStamp 可以转成Date对象安博中程在线 8/14
    • Handling ErrorsgetCurrentPosition()的第二个参数(可选)——容错处理的回调函数:在获取地理位置过程中有任何错误,都会调用该回调函数,并且会传入一个PositionError对象作为参数。安博中程在线<script type=text/javascript>function find_my_location() {if (Modernizr.geolocation) {navigator.geolocation.getCurrentPosition(show_map, handle_error);} else {// 其他方案}}function handle_error(err) {if (err.code == 1) {// 用户说不!}}</script>JAVASCRIPT9/14
    • PositionError对象属性 类型 备注code short 可枚举message DOMString 与终端用户无关其中code属性具有以下属性值:安博中程在线PERMISSION_DENIED(1): 用户不同意被获取位置信息。POSITION_UNAVAILABLE(2): 网络不可用或者无法连接到获取位置信息的卫星。TIMEOUT(3): 网络可用但是花了太长时间的计算用户的位置上。UNKNOWN_ERROR(0): 发生其他未知错误。····10/14
    • PositionOptions对象两种定位方式和缓存的位置信息属性 类型 默认值 备注enableHighAccuracy boolean false 设成true可能会使得获取位置的速度变慢timeout long 没有默认值 单位:毫秒maximumAge long 0 单位:毫秒安博中程在线 11/14
    • Example获得经纬度信息并在地图上显示显示位置显示位置安博中程在线navigator.geolocation.getCurrentPosition(function(position) {var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);var marker = new google.maps.Marker({position: latLng, map: map});map.setCenter(latLng);}JAVASCRIPT12/14
    • 扩展阅读安博中程在线W3C地理位置 APIgeo.js, 地理位置的JS Framework。依照W3C地理位置 API规范封装了底层系统特定的实现。··13/14
    • <Thank you!>微博 @范圣刚博客 www.tfan.orggithub github.com/princetoad