HTML5 获取当前位置的经纬度

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:我一直是很懒的。)需要的自己下载吧! 移动端的需要部署到自己的服务器上看的哦!

站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(5) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

小月博客-一个专注于分享的技术博客
没有账号? 忘记密码?