HTML5 地理位置和本地存储

本文详细介绍了HTML5的两大特性——获取地理位置信息和本地存储,并结合Google Map展示了如何实现定位及数据存储。通过示例代码,演示了如何在用户许可下获取地理位置,以及利用localStorage和SQLite进行数据操作。同时提供了一个DEMO下载链接,帮助读者深入理解这些功能。
摘要由CSDN通过智能技术生成

获取地理位置信息和本地存储是HTML5的两大新特性,本文就这两个特性进行讲解,最后整合出一个完整的DEMO。DEMO的页面使用Google map,可以定位当前用户的位置,也可以自定义查询城市,并可以将当前用户的地理坐标保存在Sqllite数据库中。

       最终效果图如下图所示:

     

地理位置信息

        如果你的浏览器支持地理位置信息获取,如果首次在浏览器中访问具有地理位置信息的页面,浏览器会提示是否开启地理位置功能。 Chrome浏览器如下所示:

     

    点击“允许”按钮就可以开始你的地理位置定位之旅了。

    在HTML5中获取当前地理位置信息使用如下代码段:

      navigator.geolocation.getCurrentPosition(onSuccess,onError,option);

     前两个参数是获取当前位置的回调方法,第一个是成功后调用的方法,第二个是失败时调用的方法。这两个方法分别有一个参数, 对应成功和失败的数据。 


                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值