判断浏览器的兼容问题：
IE9+支持地理定位，FF Chrome新版支持地理定位
| if (navigator.geolocation) {
alert(‘支持地理定位‘); } else { alert(‘不支持地理定位‘); } |
获取自己位置经纬度
| <script>
var x=document.getElementById("wrap"); function getLocation () { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { alert(‘不支持地理定位——HTML5自由者！‘); } } getLocation(); function showPosition(position) { x.innerHTML ="纬度："+position.coords.latitude + "<br />经度："+position.coords.longitude; } </script> |
处理错误和拒绝
| getCurrentPosition(参数1，参数2); 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数
错误代码：
/*显示定位错误*/ function showError(error) { switch(error.code) { case error.POSITION_UNAVAILABLE: x.innerHTML="无法获取当前位置！"; break; case error.PERMISSION_DENIED: x.innerHTML="用户不允许地理定位！"; break; case error.TIMEOUT: x.innerHTML="操作超时！"; break; case error.UNKNOWN_ERROR: x.innerHTML="未知的错误！" ; break; } } |
watchPosition 使用方法跟getCurrenPosition方法类似 ，watchPosition返回用户的当前位置，如果用户移动则返回实时位置，就跟GPS一样。① navigator.geolocation.watchPosition(showPosition);
② clearWatch() - 停止 watchPosition() 方法
? 百度地图API助手 http://developer.baidu.com/map/
| /*经纬度显示在地图上*/
function showOnMap(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+"‘ />"; } |
DEMO演示： 显示经纬度 调用百度地图API显示地图信息
HTML5地理定位，百度地图API，知识点熟悉,布布扣,bubuko.com