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. 创建自己的java类库并加以调用方法

    第一次搞博客,心里有点发慌,记录一下:2018/2/1/   21:33 今天Think In Java第4版 中文版(英文看着可能很耗时),看到了6.1.3 定制工具库这一章节,之前作者调用自己的类 ...

  2. 面向对象 - 1.封装之如何实现属性的隐藏/2.封装的意义/3.封装与扩展性/4.property的使用

    1.封装之如何实现属性的隐藏封装: __x=1 # 把数据属性隐藏 (如何实现隐藏) 类定义阶段 __开头发生了变形 __x --> _A__x特点: 1.在类外部无法直接:obj.__Attr ...

  3. 剑指Offer——二维数组中的查找

    题目描述: 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 分析: 因为二维数组 ...

  4. django的cookie和session以及缓存

    cookie和session cookie和session的作用: cookie和session都记录了客户端的某种状态,用来跟踪用户访问网站的整个回话.两者最大的区别是cookie的信息是存放在浏览 ...

  5. rem根元素的定义规则

    <script> !function(a) { function b() { var b = g.getBoundingClientRect().width; var winpix=1; ...

  6. HBA 卡和RAID 卡

    HBA卡: 只从HBA的英文解释HOST BUS ADAPTER(主机总线适配器)就能看出来,他肯定是给主机用的,一般HBA就是给主机插上后,给主机扩展出更多的接口,来连接外部的设备.大多数讲到HBA ...

  7. mysql 练习题（Day44）

    init.sql文件内容 /* 数据导入: Navicat Premium Data Transfer Source Server : localhost Source Server Type : M ...

  8. python数据可视化、数据挖掘、机器学习、深度学习 常用库、IDE等

    一.可视化方法 条形图 饼图 箱线图(箱型图) 气泡图 直方图 核密度估计(KDE)图 线面图 网络图 散点图 树状图 小提琴图 方形图 三维图 二.交互式工具 Ipython.Ipython not ...

  9. String与其他类型的转换

    首先,对于String类有一点是毫无疑问的:对String对象的任何改变都不影响到原对象,相关的任何change操作都会生成新的对象. 一. String与StringBuilder.StringBu ...

  10. rpm命令,yum命令大全

    rpm 执行安装包二进制包(Binary)以及源代码包(Source)两种.二进制包可以直接安装在计算机中,而源代码包将会由RPM自动编译.安装.源代码包经常以src.rpm作为后缀名. 常用命令组合 ...