【课程】web2.0程序设计
【作业要求】研究 winodw.navigater 对象,写一段 javascript 程序,收集地理位置信息,并使用百度或高德等地图 api,在地图上展示用户当前位置。
【参考文档】HTML5 地理定位 W3School 参考手册
【实验环境】 Ubantu firefox
我这里用的是谷歌的API
1.首先我们先放置一个简单的界面：
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="script.js"></script>
</head>
<body>
<p id="demo">click this button to get ur position</p>
<button id="Get">TYI</button>
<div id="mapholder"></div>
</body>
</html>
这里面从script的标签就可以看到，我是自己写了一个script.js，还有链接到谷歌的API
1.HTML5 Geolocation API 用于获得用户的地理位置。其中getCurrentPosition() 方法来获得用户的位置。
function getLocation() { //检测是否支持地理定位 if (navigator.geolocation) // 如果支持，则运行 getCurrentPosition() 方法 // 如果getCurrentPosition()运行成功 // 则向参数showPosition中规定的函数返回一个coordinates对象 // getCurrentPosition() 方法的第二个参数用于处理错误 // 它规定当获取用户位置失败时运行的函数 navigator.geolocation.getCurrentPosition(showPosition,showError); else // 如果不支持，则向用户显示一段消息 x.innerHTML="Geolocation is not supported by this browser."; }
2.按照谷歌地图API的格式要求调用，并将地图显示在我的页面里面：
// showPosition() 函数获得并显示经度和纬度 function showPosition(position) { lat=position.coords.latitude; lon=position.coords.longitude; latlon=new google.maps.LatLng(lat, lon) mapholder=document.getElementById(‘mapholder‘) mapholder.style.height=‘250px‘; mapholder.style.width=‘500px‘; var myOptions={ center:latlon,zoom:14, mapTypeId:google.maps.MapTypeId.ROADMAP, mapTypeControl:false, navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} }; var map=new google.maps.Map(document.getElementById("mapholder"),myOptions); var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"}); }
3.getCurrentPosition() 方法的第二个参数用于处理错误，它规定当获取用户位置失败时运行的函数。这里我定义showError函数。
function showError(error) { switch(error.code) { // Permission denied - 用户不允许地理定位 case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation."; break; // Position unavailable - 无法获取当前位置 case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable."; break; // Timeout - 操作超时 case error.TIMEOUT: x.innerHTML="The request to get user location timed out". break; // unknown error 位置错误 case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred."; break; } }
我的完整的JS代码如下：
window.onload=function(){ document.getElementById("Get").onclick=getLocation; } var x=document.getElementById("demo"); function getLocation() { //检测是否支持地理定位 if (navigator.geolocation) // 如果支持，则运行 getCurrentPosition() 方法 // 如果getCurrentPosition()运行成功 // 则向参数showPosition中规定的函数返回一个coordinates对象 // getCurrentPosition() 方法的第二个参数用于处理错误 // 它规定当获取用户位置失败时运行的函数 navigator.geolocation.getCurrentPosition(showPosition,showError); else // 如果不支持，则向用户显示一段消息 x.innerHTML="Geolocation is not supported by this browser."; } // showPosition() 函数获得并显示经度和纬度 function showPosition(position) { lat=position.coords.latitude; lon=position.coords.longitude; latlon=new google.maps.LatLng(lat, lon) mapholder=document.getElementById(‘mapholder‘) mapholder.style.height=‘250px‘; mapholder.style.width=‘500px‘; var myOptions={ center:latlon,zoom:14, mapTypeId:google.maps.MapTypeId.ROADMAP, mapTypeControl:false, navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} }; var map=new google.maps.Map(document.getElementById("mapholder"),myOptions); var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"}); } function showError(error) { switch(error.code) { // Permission denied - 用户不允许地理定位 case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation."; break; // Position unavailable - 无法获取当前位置 case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable."; break; // Timeout - 操作超时 case error.TIMEOUT: x.innerHTML="The request to get user location timed out". break; // unknown error 位置错误 case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred."; break; } }
看到的效果图如下：