html5 返回当前地理位置的坐标点(经纬度)

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>
时间: 2024-10-29 19:11:24

html5 返回当前地理位置的坐标点(经纬度)的相关文章

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

Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. Html5获取地理位置信息是通过Geolocation API提供,使用其getCurrentPosition方法,此方法中有三个参数,分别是成功获取到地理位置信息时所执行的回调函数,失败时所执行的回调函数和可选属性配置项. 如下Demo演示了通过Geolocation获取地理位置信息,并在百度地

Javascript学习总结 - html5实现定位地理位置

简述 最近在苦逼学习Javascript,并且是有任务需要去完成的,因此就有一个想法要总结记录一下自己的学习成果.这次的总结主题是html5实现定位地理位置的任务,结合原生的Javascript实现此功能. html5 什么是html5? 万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改版本,2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成,命名为html5. HTML5草案的前身名为 Web Applications

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

HTML5扩展,继上两篇博客,我们来看一下HTML5的一些扩展的功能,由于HTML5更多是为了兼容电脑浏览器,安卓浏览器,苹果浏览器更多浏览器,或者说为这些浏览器提供一个统一的标准.因此目前在手机上的web开发,HTML5是比较火的.因此这几款扩展功能,感觉更多是从手机,平板等角度出发的. 一,地理定位:首先看一下地理位置的定位的几种形式:IP地址,GPS(Global Positioning System ),Wifi,GSM(Global System for Mobile Communic

HTML5开发:地理位置定位指南

地理定位是HTML5提供的最令人激动的特性之一. 用相对简单的JavaScript代码,可以创建出能确定用户地理位置详细信息的Web应用,包括经纬度以及海拔等.一些Web应用甚至能通过监控用户位置随时间的移动来提供导航功能,其中还综合了GoogleMaps API这样的地图系统. 和所有HTML5的功能一样,你还不能依赖浏览器提供支持.而在浏览器提供支持的地方,它在深度和持续性上会有变化.本质上,你需要为那些浏览器不能为HTML5提供完全支持的用户提供替代功能. 在这篇教程里,我们会了解一些创建

计算2个坐标(经纬度)之间的距离,.Net

.Net 中计算2个点之间的距离的方法,或者叫计算2个坐标,2个经纬度之间的距离. 代码如下: 1 /// <summary> 2 /// Calculates the distance between two geographics locations 3 /// </summary> 4 public static class GeoDistance 5 { 6 public static double Between(double latitude1, double long

北京54坐标和经纬度坐标转换算法c++

//坐标正算lbxy(double l, double b, double *x, double *y, int l0){ double sa,sb,sep,sn,sy2,st,sm,sx,hb; double xx,yy,hd,sd; //判断值的范围 if (l > 360 || l < 0 || b > 360 || b < 0) {  *x = l;  *y = b;  return; } l  = l-l0; sa = 6378245;    sb = 6356863.0

基于浏览器的HTML5地理定位

地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理和一个基于浏览器的HTML5地理定位的小demo,获取浏览器经纬度,并用腾讯地图(大家可以选择自己喜欢的地图)显示出来,实现的最终效果如下图所示: 一.检测浏览器是否支持: if (navigator.geolocation) { //console.log("浏览器支持!"); } else

mongodb 数据库详解

第1章 数据库管理系统 1.1 前言 01.数据的定义:文字.图像.地理位置信息(坐标.经纬度)等 02.数据库管理系统的定义:建立.存取和管理数据,保证数据安全和完整性的软件 03.常见的数据库管理系统: 关系型:MySQL.Oracle.SQL Server.Db2等 非关系型:MongoDB.Redis.HBase等 数据库管理系统使用情况排名https://db-engines.com/en/ranking 1.2 NoSQL简介 NoSQL=Not Only SQL,支持类似SQL的功

mysql实现地球地理位置经纬度坐标排序

SELECT locationId,lon,lat,        (POWER(MOD(ABS(lon - x),360),2) + POWER(ABS(lat - y),2)) AS distance        FROM `eyanghu_location` ORDER BY distance LIMIT 1000 x,y替换成你当前坐标的经纬度就行.