HTML5地理定位Geolocation

最新推荐文章于 2022-03-15 16:45:00 发布

2012013977

最新推荐文章于 2022-03-15 16:45:00 发布

阅读量504

点赞数

分类专栏： js API

本文链接：https://blog.csdn.net/nianzhi1202/article/details/53207118

版权

js 同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

API

4 篇文章 0 订阅

订阅专栏

在使用h5定位之前首先应该了解一点h5定位的常识

h5的定位主要应用于移动端，使用的谷歌的位置服务，一般我们使用其返回的经纬度，但这只是GPS坐标，如果用百度地图还需转化为百度坐标，可以使用的转换接口

如果只是实现定位到城市，也可以使用

<!DOCTYPE html>
<html>
<head>
<title>H5地理位置Demo</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=134db1b9cf1f1f2b4427210932b34dcb"></script>
<script type="text/javascript" src="./convertor.js"></script>
</head>
<body>
</body>
<script>
/**
* 这里是通过H5获取的GPS坐标。
* 如果想知道自己的位置的地名，可以转换成百度坐标。再调用一个接口进行获取
*/
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{alert("Geolocation is not supported by this browser.");}
}
function showPosition(position)
{
var x = position.coords.longitude;//GPS经度
var y = position.coords.latitude; //GPS纬度
alert(x);
alert(y);
var gpsPoint = new BMap.Point(x,y);
//坐标转换，地理坐标转换成平面坐标
BMap.Convertor.translate(gpsPoint,0,translateCallback);
//坐标转换完之后的回调函数
function translateCallback(point){
// 百度地图API功能
var point = new BMap.Point(point.lng,point.lat);
var gc = new BMap.Geocoder();
gc.getLocation(point, function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
}
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
getLocation();
</script>
</html>