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. php 验证所传参数为必填的时候的验证逻辑

    此段代码摘自lumen框架: xx/vendor/illuminate/validation/Validator.php /** * Validate that a required attribut ...

  2. [Note] Collaborator vs. the Factory

    Collaborator-vs-he-Factoryhtml, body {overflow-x: initial !important;}html { font-size: 14px; } body ...

  3. 【WPF】代码触发Button点击事件

    先定义Button按钮并绑定事件. public void test() { Button btn = new Button(); btn.Click += Btn_Click; } private ...

  4. JDK观察者模式和事件机制比较<转>

    原文:(六)观察者模式详解(包含观察者模式JDK的漏洞以及事件驱动模型) 作者:zuoxiaolong8810(左潇龙),转载请注明出处. 本章我们讨论一个除前面的单例以及代理模式之外,一个WEB项目 ...

  5. jmap查看内存使用情况与生成heapdump

    jmap查看内存使用情况与生成heapdump 如果想分析自己的JAVA Application时,可以使用jmap程序来生成heapdump文例: jmap -heap 1234  (1234为进程 ...

  6. 根据map键值对，生成update与select语句，单条执行语句

    方法 constructUpdateSQL private static String constructUpdateSQL(String tableName, List<Map<Stri ...

  7. Php5.5新特性 Generators详解

    在PHP5.5.0版本中,新增了生成器(Generators)特性,用于简化实现迭代器接口(Iterator)创建简单的迭代器的复杂性. 通过生成器,我们可以轻松的使用foreach迭代一系列的数据, ...

  8. Java设计模式（12）迭代模式（Iterator模式）

    上了这么多年学,我发现一个问题,好象老师都很喜欢点名,甚至点名都成了某些老师的嗜好,一日不点名,就饭吃不香,觉睡不好似的,我就觉得很奇怪,你的课要是讲的好,同学又怎么会不来听课呢,殊不知:“误人子弟, ...

  9. flush()的原理

    输出流类似于一根管道,输出的时候先放到管道里,然后管道满了存到介质上(硬盘或其他地方),当我们输出完后管道里面可能还有剩余,就用flush()清空管道即全部存到介质上.Java默认的缓冲区大小一般是8 ...

  10. R语言基本操作函数(1)变量的基本操作

    1.变量变换        as.array(x),as.data.frame(x),as.numeric(x),as.logical(x),as.complex(x),as.character(x) ...