Geolocation（地理定位）

最新推荐文章于 2022-11-22 09:52:17 发布

iteye_7552

最新推荐文章于 2022-11-22 09:52:17 发布

阅读量124

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/iteye_7552/article/details/82641354

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

下例是一个简单的地理定位实例，可返回用户位置的经度和纬度:
[quote]
<!DOCTYPE html>
<html>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button οnclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}
function showPosition(position)
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
</script>
</body>
</html>

[/quote]

[b]
处理错误和拒绝[/b]
getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数：
[quote]function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误。"
break;
}
}[/quote]

[b]在地图中显示结果[/b]
如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图：
实例
[quote][quote]function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";

document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}

[b]在地图中显示结果[/b]
如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图：
[quote]
<!DOCTYPE html>
<html>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button οnclick="getLocation()">点我</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}

function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误。"
break;
}
}
</script>
</body>
</html>

[/quote]

[b]给定位置的信息[/b]
本页演示的是如何在地图上显示用户的位置。不过，地理定位对于给定位置的信息同样很有用处。
实例:
更新本地信息
显示用户周围的兴趣点
交互式车载导航系统 (GPS)
getCurrentPosition() 方法 - 返回数据
T若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。
[table]
|属性描述
|
|coords.latitude 十进制数的纬度
|
|coords.longitude 十进制数的经度
|
|coords.accuracy 位置精度
|
|coords.altitude 海拔，海平面以上以米计
|
|coords.altitudeAccuracy 位置的海拔精度
|
|coords.heading 方向，从正北开始以度计
|
|coords.speed 速度，以米/每秒计
|
|timestamp 响应的日期/时间|
[/table]

iteye_7552

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Geolocation（地理定位）

下例是一个简单的地理定位实例，可返回用户位置的经度和纬度:[quote]点击按钮获取您当前坐标（可能需要比较长的时间获取）：点我var x=document.getElementById("demo");function getLocation() { if (navigator.geolocation) { navigator....
复制链接

扫一扫