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