BAIDU

<!DOCTYPE html>

<html>

<body>

<p id="demo">点击这个按钮，获得您的坐标：</p>

<button onclick="getLocation()">试一下</button>

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

</body>

</html>

GOOGLE

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>GIS开发利用html5获取经纬度</title>

</head>

<body>

<span id="support">将以下的经纬度输入谷歌地图：</span>

<div id="show">

纬度：<span id="latitude"></span><br />

经度：<span id="longitude"></span><br />

经纬度准确度：<span id="accuracy"></span><br />

海拔：<span id="altitude"></span><br />

海拔高度的准确度：<span id="altitudeAcuracy"></span><br />

朝向：<span id="heading"></span><br />

速度：<span id="speed"></span>

</div>

<script type="text/javascript">

var doc = document,

    latitude = doc.getElementById('latitude'),

    longitude = doc.getElementById('longitude'),

    accuracy = doc.getElementById('accuracy'),

    altitude = doc.getElementById('altitude'),

	altitudeAcuracy = doc.getElementById('altitudeAcuracy'),

	heading = doc.getElementById('heading'),

	speed = doc.getElementById('speed'),

	support = doc.getElementById('support'),

    showDiv = doc.getElementById('show');

function lodeSupport(){

    if(navigator.geolocation){

        support.innerHTML = '将以下的经纬度输入谷歌地图(纬度 经度)查看自己位置：';

        showDiv.style.display = 'block';

        navigator.geolocation.getCurrentPosition(updataPosition,showError);

    }else{

        support.innerHTML = '对不起，浏览器不支持！

';

        showDiv.style.display = 'none';

    }

}

function updataPosition(position){

    var latitudeP = position.coords.latitude,

        longitudeP = position.coords.longitude,

        accuracyP = position.coords.accuracy,

		altitudeP = position.coords.altitude,

		altitudeAcuracyP = position.coords.altitudeAcuracy,

		headingP = position.coords.heading,

		speedP = position.coords.speed;

    latitude.innerHTML = latitudeP;

    longitude.innerHTML = longitudeP;

    accuracy.innerHTML = accuracyP;

	altitude.innerHTML = altitudeP;

	altitudeAcuracy.innerHTML = altitudeAcuracyP;

	heading.innerHTML = headingP;

	speed.innerHTML = speedP;

}

function showError(error)

{

  switch(error.code)

    {

    case error.PERMISSION_DENIED:

      showDiv.innerHTML="用户拒绝訪问地理位置"

      break;

    case error.POSITION_UNAVAILABLE:

      showDiv.innerHTML="地理位置信息无法获取"

      break;

    case error.TIMEOUT:

      showDiv.innerHTML="获取位置时间超时"

      break;

    case error.UNKNOWN_ERROR:

      showDiv.innerHTML="我擦，这是一个未知的错误"

      break;

    }

}

window.addEventListener('load', lodeSupport , true);

</script>

</body>

</html>

html5 返回当前地理位置的坐标点（经纬度）的更多相关文章

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

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

  2. AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能

    HTML5实现获取地理位置信息并定位功能 注:请点击此处进行充电! 前言 这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5.百度地图.谷歌地图等三种获取理位置信息并 ...

  3. html5实现获取地理位置信息并定位

    这里主要讲h5实现获取地理位置信息并定位功能,本文讲解了原生h5,百度地图,谷歌地图等三种获取地理信息并定位的方法,需要的朋友可以参考下: h5提供了地理位置功能(Geolocation API),能 ...

  4. Html5 Geolocation获取地理位置信息(转)

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

  5. HTML5实现获取地理位置信息并定位功能

    HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用.本文结合实例给大家分享如何使用HTML5,借助百度.谷歌地 ...

  6. html5代码,获取地理位置

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...

  7. ArcGIS Engine 下投影坐标和经纬度坐标的相互转换

    ArcGIS Engine 下投影坐标和经纬度坐标的相互转换 投影转经纬度 ); pPoint.Project(pSRF.CreateGeographicCoordinateSystem((int)e ...

  8. ArcEngine下投影坐标和经纬度坐标的相互转换

    jojojojo2002 原文 ArcEngine下投影坐标和经纬度坐标的相互转换 投影转经纬度 private IPoint PRJtoGCS( double x, double y) { IPoi ...

  9. HTML5基础扩展——地理位置、本地存储、缓存

    HTML5扩展,继上两篇博客,我们来看一下HTML5的一些扩展的功能,由于HTML5更多是为了兼容电脑浏览器,安卓浏览器,苹果浏览器更多浏览器,或者说为这些浏览器提供一个统一的标准.因此目前在手机上的 ...

随机推荐

  1. poj1077(康托展开+bfs+记忆路径)

    题意:就是说,给出一个三行三列的数组,其中元素为1--8和x,例如: 1 2 3 现在,需要你把它变成:1 2 3 要的最少步数的移动方案.可以右移r,左移l,上移u,下移dx 4 6 4 5 67 ...

  2. python下使用epoll

    Reference: http://blog.csdn.net/hehe123456ZXC/article/details/52526670 因为最近想学习如何用epoll写服务器, 于是找到了一篇介 ...

  3. sql2008破解加密存储过程

    网上的很多不能正确解密,出现空白,还好有这个,mark下了. Create PROCEDURE [dbo].[sp_windbidecrypt] (@procedure sysname = NULL, ...

  4. mysql多表查询及其 group by 组内排序

    //多表查询:得到最新的数据后再执行多表查询 SELECT *FROM `students` `st` RIGHT JOIN( //先按时间排序查询,然后分组(GROUP BY ) SELECT * ...

  5. git学习(六)：git stash

    对于更改操作的处理 使用git status命令可以看到当前工作区的状态: git status // 查看工作区的状态 // 对于已经git add工作区中文件 git reset HEAD < ...

  6. centOSmini安装教程

    最近使用了CentOS发现比Ubuntu更简洁,有些爱上CentOS了 1. 准备一版CentOS安装镜像文件 官网下载地址:http://www.centos.org/download/ 官方有三个 ...

  7. docker原理

    Docker原理11 Linux Namespace 11 AUFS文件系统17 重新理解Docker的各种命令18 Docker原理 Linux Namespace docker是一个容器引擎,容器 ...

  8. hbase1.4.0安装和使用

    jia下载地址:  http://mirrors.shuosc.org/apache/hbase/1.4.0/ 解压 tar -zxvf hbase-1.4.0-bin.tar.gz 修改环境变量 [ ...

  9. linux 基础笔记（一）

    [1.1]系统的选择 Centos: CentOS(Community Enterprise Operating System)是Linux发行版之一,它是来自于Red Hat Enterprise  ...

  10. TF-IDF词项权重计算

    一.TF-IDF 词项频率: df:term frequency. term在文档中出现的频率.tf越大,词项越重要. 文档频率: tf:document frequecy.有多少文档包括此term, ...