今天上午市场部门让我写一个地图导航的功能,我特么的不想写。一再的推辞。我说你们项目要求紧握需要时间看看,肯定不成的。因为我感觉这个功能首先需要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:我一直是很懒的。)需要的自己下载吧! 移动端的需要部署到自己的服务器上看的哦!


demo下载请点击