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. Android开发（一）——全屏或者取消标题栏

    先介绍去掉标题栏的方法: 第一种:也一般入门的时候经常使用的一种方法 requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏 注意这句一定要写在se ...

  2. 判断URL文件是不是在于在。

    判断URL文件是不是在于在. private static bool UrlIsExist(string url) { System.Uri u = null; try { u = new Uri(u ...

  3. jdbc连接sqlserver报错java.lang.ClassNotFoundException: com.microsoft.jdbc.sqlserver.SQLServerDriver

    使用2008的数据库, 我已经引入的sqljdbc4的包,单还是报这个错,很奇怪突然想到在配置hibernate的时候,是拷贝下来的代码 然后到网上查了下, 因为是2008的版本驱动和2000的有点不 ...

  4. 轻量级Modal模态框插件cta.js

    今天给大家分享一款轻量级Modal模态框插件cta.js.这是一款无需使用jQuery插件,纯js编写的模态框弹出特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <se ...

  5. kafka中的消费组

    一直以来都想写一点关于kafka consumer的东西,特别是关于新版consumer的中文资料很少.最近Kafka社区邮件组已经在讨论是否应该正式使用新版本consumer替换老版本,笔者也觉得时 ...

  6. jQuery（四）：HTML代码操作

    html()可以对HTML代码进行操作,类似于元素JavaScript中的innerHTML. 例如: 示例: <!DOCTYPE html> <html lang="en ...

  7. PHP 调试利器之 PHPDBG

    简介 PHPDBG是一个PHP的SAPI模块,可以在不用修改代码和不影响性能的情况下控制PHP的运行环境. PHPDBG的目标是成为一个轻量级.强大.易用的PHP调试平台.可以在PHP5.4和之上版本 ...

  8. C#/.NET 学习之路——从入门到放弃

    原文链接地址:http://blog.liuhaoyang.me/dotnet/2016/11/25/csharp-books/ 向架构师大步迈进的书单 C# 入门 <C# 本质论> &l ...

  9. PriorityQueue的Java实现

    借助heap数据结构实现. 以小顶heap为例(说明值越小优先级越高,如距离),代码如下: // PriorityQueue.java // Java Spatial Index Library // ...

  10. linux系统Qt实现简单的任务管理器

    继续上次的操作系统课设,这次需要设计一个简单的任务管理器,大部分人选择GTK来实现,我剑走偏锋,使用Qt来完成这个任务. 用户和应用程序可以通过/proc得到系统的信息,并可以改变内核的某些参数.由于 ...