HTML5获取地理位置简单实例

实例1--获取地理位置的经纬度：

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>获取地理位置</title> 

</head>

<body>

<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>

<button onclick="getLocation()">点我</button>

<script>

var x=document.getElementById("demo");

function getLocation()

{

    if (navigator.geolocation)

    {

        navigator.geolocation.getCurrentPosition(showPosition,showError);

    }

    else

    {

        x.innerHTML="该浏览器不支持定位。";

    }

}

function showPosition(position)

{

    x.innerHTML="纬度: " + position.coords.latitude +

    "<br>经度: " + position.coords.longitude;

}

function showError(error)

{

    switch(error.code)

    {

        case error.PERMISSION_DENIED:

            x.innerHTML="用户拒绝对获取地理位置的请求。"

            break;

        case error.POSITION_UNAVAILABLE:

            x.innerHTML="位置信息是不可用的。"

            break;

        case error.TIMEOUT:

            x.innerHTML="请求用户地理位置超时。"

            break;

        case error.UNKNOWN_ERROR:

            x.innerHTML="未知错误。"

            break;

    }

}

</script>

</body>

</html>

实例解析:

  • 检测是否支持地理定位
  • 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
  • 如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
  • showPosition() 函数获得并显示经度和纬度
  • Permission denied - 用户不允许地理定位
  • Position unavailable - 无法获取当前位置
  • Timeout - 操作超时

实例2--在地图上显示结果：

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>在地图上显示结果</title> 

</head>

<body>

<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>

<button onclick="getLocation()">点我</button>

<div id="mapholder"></div>

<script>

var x=document.getElementById("demo");

function getLocation()

{

    if (navigator.geolocation)

    {

        navigator.geolocation.getCurrentPosition(showPosition,showError);

    }

    else

    {

        x.innerHTML="该浏览器不支持获取地理位置。";

    }

}

function showPosition(position)

{

    var latlon=position.coords.latitude+","+position.coords.longitude;

    var img_url="http://maps.googleapis.com/maps/api/staticmap?center="

    +latlon+"&zoom=14&size=400x300&sensor=false";

    document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";

}

function showError(error)

{

    switch(error.code)

    {

        case error.PERMISSION_DENIED:

            x.innerHTML="用户拒绝对获取地理位置的请求。"

            break;

        case error.POSITION_UNAVAILABLE:

            x.innerHTML="位置信息是不可用的。"

            break;

        case error.TIMEOUT:

            x.innerHTML="请求用户地理位置超时。"

            break;

        case error.UNKNOWN_ERROR:

            x.innerHTML="未知错误。"

            break;

    }

}

</script>

</body>

</html>

实例3--Google地图脚本：

演示如何使用脚本来显示带有标记、缩放和拖曳选项的交互式地图。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>交互式地图</title> 

</head>

<body>

<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>

<button onclick="getLocation()">点我</button>

<div id="mapholder"></div>

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>

<script>

var x=document.getElementById("demo");

function getLocation()

{

    if (navigator.geolocation)

    {

        navigator.geolocation.getCurrentPosition(showPosition,showError);

    }

    else

    {

        x.innerHTML="该浏览器不支持获取地理位置。";

    }

}

function showPosition(position)

{

    lat=position.coords.latitude;

    lon=position.coords.longitude;

    latlon=new google.maps.LatLng(lat, lon)

    mapholder=document.getElementById('mapholder')

    mapholder.style.height='250px';

    mapholder.style.width='500px';

    var myOptions={

        center:latlon,zoom:14,

        mapTypeId:google.maps.MapTypeId.ROADMAP,

        mapTypeControl:false,

        navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}

    };

    var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);

    var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});

}

function showError(error)

{

    switch(error.code)

    {

        case error.PERMISSION_DENIED:

            x.innerHTML="用户拒绝对获取地理位置的请求。"

            break;

        case error.POSITION_UNAVAILABLE:

            x.innerHTML="位置信息是不可用的。"

            break;

        case error.TIMEOUT:

            x.innerHTML="请求用户地理位置超时。"

            break;

        case error.UNKNOWN_ERROR:

            x.innerHTML="未知错误。"

            break;

    }

}

</script>

</body>

</html>

getCurrentPosition() 方法 - 返回数据

T若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

属性 描述
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔，海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向，从正北开始以度计
coords.speed 速度，以米/每秒计
timestamp 响应的日期/时间

Geolocation 对象 - 其他有趣的方法

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例（比如 iPhone）：

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>GPS精确定位</title> 

</head>

<body>

<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>

<button onclick="getLocation()">点我</button>

<script>

var x=document.getElementById("demo");

function getLocation()

{

    if (navigator.geolocation)

    {

        navigator.geolocation.watchPosition(showPosition);

    }

    else

    {

        x.innerHTML="该浏览器不支持获取地理位置。";

    }

}

function showPosition(position)

{

    x.innerHTML="纬度: " + position.coords.latitude +

    "<br>经度: " + position.coords.longitude;

}

</script>

</body>

</html>

【Demo】HTML5获取地理位置的更多相关文章

  1. html5获取地理位置信息API

    html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...

  2. HTML5 获取地理位置信息

    HTML5增加的新功能,获取地理位置信息,如果浏览器支持且设备有定位功能,就能够直接使用这组API来获取当前信息位置.该Geolocation API可以应用于移动设备中的地理位置. Geolocat ...

  3. HTML5获取地理位置

    包含了以下功能:(1)通过IP地址获取城市地址(并不完全准确,存在代理IP或IP中转时定位与实际位置不一致的情况)(2)通过移动端浏览器及GPS定位位置坐标(3)根据位置坐标转换百度地图坐标(4)根据 ...

  4. HTML5获取地理位置定位信息

    如何使用HTML5地理位置定位功能 定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确.首先我们要检测用 ...

  5. HTML5获取地理位置信息

    <!DOCTYPE html> <html> <head> <title>Location</title> <meta charset ...

  6. jQuery Mobile + HTML5 获取地理位置信息

      这个代码也非常简单,核心是HTML5中GeoLocation API,函数原型定义如下: void getCurrentPosition(in PositionCallback successCa ...

  7. html5获取地理位置和定位

    1.H5地理位置定位功能 首先判断用户浏览器是否支持该功能,目前大多数现代浏览器均支持,获取位置信息需用户授权同意 function getLocation(){ if (navigator.geol ...

  8. HTML5获取地理位置信息并在Google Maps上显示

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  9. Html5 Geolocation获取地理位置信息

    Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...

随机推荐

  1. python 三行代码实现快速排序

    python 三行代码实现快速排序 最近在看 python cookbook , 里面的例子很精彩,这里就帮过来,做个备忘录 主要利用了行数的递归调用和Python的切片特性,解释一下每行代码的含义: ...

  2. 修改hosts文件不起作用

    今天遇到个很奇怪的问题,在hosts文件里添加了一些域名指向后,发现根本没起作用,后来还发现个细节,就是hosts文件左下角有个小锁的标志,开始以为是杀毒软件之类的把他锁了.可是没找到在哪里有相关操作 ...

  3. Maven 整合SSH框架

    1. 传递依赖冲突 1.1 传递依赖:A(项目)依赖B,B依赖C(1.1版本),B是A的直接依赖,C是A的传递依赖; A(项目)又依赖D,D依赖C(1.2版本),此时,C有两个版本,产生冲突; 1.2 ...

  4. BaseDao 接口

    // 以后所有的 Dao 接口都需要继承 BaseDao 接口; // 自定义泛型接口 public interface BaseDao<T>{ public void save(T t) ...

  5. Django页面重定向

    重定向分为永久性重定向和暂时性重定向,在页面上体现的操作就是浏览器会从一个页面自动跳转到另外一个页面.比如用户访问了一个需要权限的页面,但是该用户当前并没有登录,因此我们应该给他重定向到登录页面. 永 ...

  6. subprocess 模块 与终端相互交互

    import subprocess ''' sh-3.2# ls /Users/egon/Desktop |grep txt$ mysql.txt tt.txt 事物.txt ''' #1 Linux ...

  7. 怎样将Excel包含某字符的单元格填充颜色

    在处理数据的时候,xmyanke想将Excel中包含某字符的单元格填充蓝色,比较容易看清,弄了好一阵子都没完成,最后试用条件格式处理了一下,终于实现了. 比如要将A1到A12区间包含数字1的单元格填充 ...

  8. cas添加验证码

    cas添加验证码,折腾了好久,终于整理好了,很大部分都是借鉴http://binghejinjun.iteye.com/blog/1255293这个的.但是他的有一个很不好的地方就是不能提升验证码错误 ...

  9. Django_内置Admin

    Django内置Admin   Django内置的Admin是对于model中对应的数据表进行增删改查提供的组件,使用方式有: 依赖APP: django.contrib.auth django.co ...

  10. 求组合数的方法：转载自VincentCZW的博客

    遇到了就查了下:地址:http://www.cnblogs.com/BeyondAnyTime/archive/2012/05/18/2508189.html 求一个组合数Cnm的值,Cnm= n! ...