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. IIS网站部署解决报错

    入坑2次,这次还是得马上总结起来== 部署网站报以上错 检查方法 步骤一:检查部署的网站路径是否正确 步骤二: 检查Internet信息管理器中,应用程序池的.net Framework版本,选择v4 ...

  2. Linux下套接字具体解释（九）---poll模式下的IO多路复用server

    參照 poll调用深入解析-从poll的实现来讲poll多路复用模型,非常有深度 poll多路复用 poll的机制与select相似,与select在本质上没有多大差别.管理多个描写叙述符也是进行轮询 ...

  3. Python 模块之 time & datetime

    Python 中提供了对时间日期的多种多样的处理方式,主要是在有 time 和 datetime 两个模块. time 在 Python 文档里,time 是归类在 Generic Operating ...

  4. xxxservlet继承HttpServlet类

    "HttpServlet类被定义为抽象类,但是源码里面没有抽象方法.所以没有一定要求实现的方法.之所以定义为抽象类,是因为他继承了GenericServlet这个抽象类.并没有全部实现里面的 ...

  5. Angular学习笔记—RxJS与Observable（转载）

    1. Observable与观察者模式的关系 其实这里讲的Observable就是一种观察者模式,只不过RxJS把Observable结合了迭代模式以及附件了很多的operator,让他变得很强大,也 ...

  6. mapreduce中获取输入文件的路径

    InputSplit inputSplit = context.getInputSplit(); String fileName = ((FileSplit) inputSplit).getPath( ...

  7. numpy.linspace介绍

    numpy.linspace:在指定范围内返回均匀间隔的数组 In [12]: import numpy as np In [13]: result = np.linspace(1,10) #默认生成 ...

  8. ubuntu下关于profile和bashrc中环境变量的理解

    (0) 写在前面 有些名词可能需要解释一下.(也可以先不看这一节,在后面看到有疑惑再上来看相关解释) $PS1和交互式运行(running interactively): 简单地来说,交互式运行就是在 ...

  9. cocos2d-x与着色器设计--入门篇(游云凌天原创)

    http://blog.csdn.net/danjinxiangsi/article/details/43949955 着色器(Shader)应用与计算机图形学领域,指一组提供计算机图形资源在渲染时执 ...

  10. Python 中lambda 简单介绍

    转自:https://www.cnblogs.com/AlwaysWIN/p/6202320.html 在学习python的过程中,lambda的语法经常出现,现在将它整理一下,以备日后查看. 1.l ...