首页 > 代码库 > winodw.navigater 使用地图 api展示当前位置
winodw.navigater 使用地图 api展示当前位置
【课程】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="http://www.mamicode.com/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; }}
看到的效果图如下：
winodw.navigater 使用地图 api展示当前位置
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。