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. chrome安装HTTP测试扩展

    chrome安装HTTP测试扩展 扩展名: DHC

  2. Android背景颜色渐变

    ●使用XML的方式为背景添加渐变效果 1.在res/drawable文件夹里添加一个jbshape.xml文件,然后写入如下代码: <?xml version="1.0" e ...

  3. IOS 禁止侧滑返回上个页面功能

    1.首先把顶部左侧返回按钮隐藏掉 //隐藏返回按钮 self.navigationItem.hidesBackButton = YES; 2.1.再禁止页面左侧侧 //禁止页面左侧滑动返回,注意,如果 ...

  4. 10G整数,找出中位数

    摘自: http://www.cnblogs.com/avril/archive/2012/04/20/2460805.html http://blog.csdn.net/flyinghearts/a ...

  5. [EF] 如何在 Entity Framework 中以手动方式设定 Code First 的 Migration 作业

    Entity Framework (简称 EF) 发展到现在, 版本已经进入 6.1.0, 距离我写的「在 VS2013 以 Code First 方式建立 EF 资料库」这篇文章已有半年的时间.如果 ...

  6. 基于jQuery+CSS3实现人物跳动特效

    分享一款基于jQuery+CSS3实现人物跳动特效.这是一款类似gif图片效果的CSS3动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=& ...

  7. [转]Extjs中的迭代方法

    原文地址:http://www.veryhuo.com/a/view/36701.html EXTJS 有很多的迭代方法,例如,你也许已知道的Ext.each,但还有另外一些不为人知且很有用的方法.首 ...

  8. 愿Linux红帽旋风吹得更加猛烈吧！

    大约在2000年年初.<中国青年出版社>准备从台湾引进图书(中译本)"Linux红帽旋风"(美国Robert Young),让我为该书写一个前言. 该书作者罗伯特.扬是 ...

  9. 【微信小程序】使用setTimeout制作定时器的思路

    setTimeout(func, time)可以使得每隔time毫秒就执行一次func函数,常用来做计时器/时钟. 下面是在微信小程序中的使用思路,只截取了关键部分代码. var timer; // ...

  10. git学习(六)：git stash

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