HTML5 获取当前位置的经纬度
今天上午市场部门让我写一个地图导航的功能,我特么的不想写。一再的推辞。我说你们项目要求紧握需要时间看看,肯定不成的。因为我感觉这个功能首先需要H5 定位,其次就是百度的API。这是我最头疼的东西了。虽然我之前写过百度地图但那效果超级low啊。
特么的下午两点人家说了我给你两天时间看看成不成,当时我就郁闷了。。。。。。我说恩。。。啊 好吧。那就看看呗。(PS: 主要自己心里没谱,没写过啊,但是人家给时间了尼还要怎么推脱呢?低头看吧!)但是我看了一下文档,写了一个小demo后瞬间感觉信心倍增啊。原来H5定位没有想象中的那么难啊!
今天给大家看看我自己写的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:我一直是很懒的。)需要的自己下载吧! 移动端的需要部署到自己的服务器上看的哦!