最新消息:欢迎大家来到小月博客

HTML5 获取当前位置的经纬度

web前端 小月 6470浏览 0评论

HTML5 获取当前位置的经纬度

 

今天上午市场部门让我写一个地图导航的功能,我特么的不想写。一再的推辞。我说你们项目要求紧握需要时间看看,肯定不成的。因为我感觉这个功能首先需要H5 定位,其次就是百度的API。这是我最头疼的东西了。虽然我之前写过百度地图但那效果超级low啊。

特么的下午两点人家说了我给你两天时间看看成不成,当时我就郁闷了。。。。。。我说恩。。。啊   好吧。那就看看呗。(PS: 主要自己心里没谱,没写过啊,但是人家给时间了尼还要怎么推脱呢?低头看吧!)但是我看了一下文档,写了一个小demo后瞬间感觉信心倍增啊。原来H5定位没有想象中的那么难啊!

map

今天给大家看看我自己写的demo怎么实现H5地理定位吧。(就是一个简单的案例长的不漂亮)

页面代码

<p id="demo">点击这个按钮,获得您的坐标:</p>
<button onclick="getLocation()">试一下</button>

JS部分

<script>
    var x=document.getElementById("demo");
    function getLocation(){
        if (navigator.geolocation){
            navigator.geolocation.getCurrentPosition(showPosition);
        }else{
            x.innerHTML="Geolocation is not supported by this browser.";
        }
    }
    function showPosition(position){
        x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
    }
 </script>

例子解释:

  • 检测是否支持地理定位
  • 如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息。
  • 如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象
  • showPosition() 函数获得并显示经度和纬度

上面的例子是一个非常基础的地理定位脚本,不含错误处理。

有什么不明白的请看 HTML5API

下班了写到这里,晚上继续和大家说说如何利用H5定位功能结合百度API 完成一个导航的需求!有需要的童鞋请继续关注。

很多小伙伴找我要demo,今天正好有时间我就稍微的整理了一下。(ps:我一直是很懒的。)需要的自己下载吧! 移动端的需要部署到自己的服务器上看的哦!


转载请注明:小月博客 » HTML5 获取当前位置的经纬度

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (6)

  1. 十次有八次获取不了,只有两次能获取到,不知什么原因
    8个月前 (09-01)回复
  2. 可以获取。但是定位有点不准。差距太大了,而且不支持IOS。不知道为啥子
    不给力的BUG4个月前 (12-20)回复
    • 不会吧,这个是我们当时测试的可以用的啊
  3. 这个根本用不了,好吗?
    phper2个月前 (03-02)回复
    • 这个是我们的一个项目,当时测试时没有bug的,不知道你的问题时什么?QQ群也有源码的
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册