一：介绍使用的知识点
1.地理定位的原理
2.geolocation对象
3.Geolocation Api
4.getCurrentPosition的第一个参数
5.getCurrentPosition的第二个参数
6.getCurrentPosition的第三个参数
7.watchPosition与clearPosition函数
二：程序演示
1.注意点
需要将新写的程序放在本地的网站下
2.启动程序
3.程序--检验浏览器是否支持定位
<!DOCTYPE html>
<head>
<meta charset=utf-8/>
<title>geolocation</title>
<script src="D:\jquery\jquery-1.12.4.min.js"></script>
</head>
<body>
<p id="geo_loc"></p>
<script>
if(navigator.geolocation){
alert("support");
}else{
alert("do not support");
}
</script>
</body>
</html>
4.运行程序
5.程序--定位
<!DOCTYPE html>
<head>
<meta charset=utf-8/>
<title>geolocation</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>
<body>
<p id="geo_loc"></p>
<div style="width:697px;height:550px;border:#ccc solid 2px;" id="dituContent"></div>
<script>
if(navigator.geolocation){
<!--alert("support");-->
navigator.geolocation.getCurrentPosition(
function(p){
var latitude=p.coords.latitude;
var longitude=p.coords.longitude;
<!--alert(latitude+"---"+longitude); //弹出经度维度-->
createMap(latitude,longitude);
},
function(e){
var err=e.code+"\n"+e.message;
alert(err);
}
);
}else{
alert("do not support");
}
<!--百度地图的展示-->
function createMap(a,b){
var map=new BMap.Map("dituContent");
var point=new BMap.Point(b,a);
map.centerAndZoom(point,10);
window.map=map;
}
</script>
</body>
</html>
6.运行结果