在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)
API详解
1、获取当前地理信息
navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
2、重复获取当前地理信息
navigator. geolocation.watchPosition(successCallback, errorCallback)
当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。position.coords.latitude 纬度
position.coords.longitude经度
position.coords.accuracy精度
position.coords.altitude海拔高度
当获取地理信息失败后，会调用errorCallback，并返回错误信息error
应用
在现实开发中，通过调用第三方API（如百度地图）来实现地理定位信息，这些API都是基于用户当前位置的，并将用位置位置（经/纬度）当做参数传递，就可以实现相应的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
<script>
var x=document.getElementById("demo");
function getLocation() // 当我们点击了按钮就会触发这个函数
{
if (navigator.geolocation) // 判断我们当前的设备是否支持 地理定位
{
// 如果支持 就 获得当前的 地理位置 调用 getCurrentPosition 方法
navigator.geolocation.getCurrentPosition(showPosition,showError);
// showPosition 如果调用成功 调用这个函数 显示 当前位置
// showError 如果调用失败 调用这个函数
}
else{ // 如果设备不支持 就返回这句话 当前浏览器不支持 地理定位
x.innerHTML="Geolocation is not supported by this browser.";}
}
// 调用 成功的函数 返回当前位置的经纬度
function showPosition(position)
{
x.innerHTML=
"Latitude: " + position.coords.latitude + // 获得当前的纬度
"<br />Longitude: " + position.coords.longitude; // 获得当前的经度
}
// 调用 失败 的函数 返回当前位置的经纬度
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;
}
}
</script>
</body>
</html>百度地图地理定位
<!DOCTYPE html>
<html>
<head>
<title>普通地图&全景图</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7IYKvewcmfolQTNaQnTOPhfmBfo3uxD8"></script>
<style type="text/css">
body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#panorama {height: 50%;overflow: hidden;}
#normal_map {height:50%;overflow: hidden;}
</style>
</head>
<body>
<div id="panorama"></div>
<div id="normal_map"></div>
<script type="text/javascript">
//全景图展示
var panorama = new BMap.Panorama('panorama');
panorama.setPosition(new BMap.Point(116.404125,39.915488)); //根据经纬度坐标展示全景图
panorama.setPov({heading: -40, pitch: 6});
panorama.addEventListener('position_changed', function(e){ //全景图位置改变后，普通地图中心点也随之改变
var pos = panorama.getPosition();
map.setCenter(new BMap.Point(pos.lng, pos.lat));
marker.setPosition(pos);
});
//普通地图展示
var mapOption = {
mapType: BMAP_NORMAL_MAP,
maxZoom: 18,
drawMargin:0,
enableFulltimeSpotClick: true,
enableHighResolution:true
}
var map = new BMap.Map("normal_map", mapOption);
var testpoint = new BMap.Point(116.404125,39.915488);
map.centerAndZoom(testpoint, 18);
var marker=new BMap.Marker(testpoint);
marker.enableDragging();
map.addOverlay(marker);
marker.addEventListener('dragend',function(e){
panorama.setPosition(e.point); //拖动marker后，全景图位置也随着改变
panorama.setPov({heading: -40, pitch: 6});}
);
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
</script>
</body>
</html>地图名片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe width="504" height="847" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://j.map.baidu.com/Fu6DN"></iframe>
</body>
</html>