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. reg_action

    function check_email($win) { $win = trim($win); $reg = '/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* ...

  2. 【vim使用】

    nano,与vim相似的一个文本编辑工具,在git merge时默认使用 https://www.vpser.net/manage/nano.html 这里介绍一下如何退出nano 按Ctrl+X 如 ...

  3. 《深入理解Linux内核》阅读笔记 --- Chapter 3 Processes

    Process Switching 1.The set of data that must be loaded into the registers before the process resume ...

  4. MongoDB-3： 查询（一）

    一.简介 MongoDB提供了db.collection.find() 方法可以实现根据条件查询和指定使用投影运算符返回的字段省略此参数返回匹配文档中的所有字段. 二．db.collection.fi ...

  5. 通过文件对照工具Merge数据库

    项目分成线下开发版.线上測试版.线上生产版,因此相应有三个数据库. 对于一些静态数据.经常须要同步.改动了线下的开发版本号,同一时候也须要更新线上的測试版和线上生产版数据库,有时候线上的一些数据库改动 ...

  6. MYSQL SET ENUM字段类型

    show create table stu;//显示建表语句 create table t1(t enum('a','b','c')); insert into t1 values('a'); cre ...

  7. 在Linux下查找文件内容包含某个特定字符串的文件

    如何在Linux下查找文件内容包含某个特定字符串的文件? 我的目录下面有test1和test2两个文件夹,里面都含有很多文件,其中test2里面还包含一个test文件夹 我想请问的是,如何通过查找关键 ...

  8. crm--业务点详细概述

    一.CRM简介:(为什么开发CRM) 此项目主要供自己的公司使用,原来因为公司人员较少,人员管理考勤等都用excel保存.但是现在因为公司人员,以及部门增多,为了方便管理 ,供销售人员使用内部系统更方 ...

  9. 整合subeclipse和Tortoise SVN

      先来一个下载链接(subeclipse1.8和TortoiseSVN1.7): http://download.csdn.net/detail/cangfengluyu/8416395   对于同 ...

  10. datagrid 用法

    http://blog.csdn.net/xhhuang1979/article/details/8331682