本文主要是介绍[HTML5 特效] HTML5 geolocation功能确定你当前所在的地理位置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
HTML5 geolocation功能能够通过浏览器确定你当前所在的地理位置,当浏览器弹出提示问是否允许共享方位信息的时候请选择允许，目前IE9不支持，请使用Chrome或者Firefox、Opear等！ 
DEMO在线演示！ 演示地址：http://www.html51.com/topic-demo-html5-geolocation-myposition.html（当浏览器弹出提示问是否允许共享方位信息的时候请选择允许） 请使用Google浏览器、Firefox3.6、Opera等支持geolocation的浏览器查看， IE9Beta目前不支持。 重点代码：
DEMO在线演示！ 演示地址：http://www.html51.com/topic-demo-html5-geolocation-myposition.html（当浏览器弹出提示问是否允许共享方位信息的时候请选择允许） 请使用Google浏览器、Firefox3.6、Opera等支持geolocation的浏览器查看， IE9Beta目前不支持。 重点代码： function supports_geolocation() { return !!navigator.geolocation; } function get_location() { if ( supports_geolocation() ) { navigator.geolocation.getCurrentPosition(show_map, handle_error); } else { // no native support; $("#msg").text('您的浏览器不支持HTML5 geolocation功能!'); } } 全部代码：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML5 Geolocation Demo</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="../page.js"></script> <link rel="stylesheet" type="text/css" href="../base.css"> </head> <body style="margin:0;"> <div id="doc" style="color:blue;"> <div id="geo-wrapper" style="border:1px solid #ccc;height:400px;"></div> <br/> <span id="msg"></span> <span id="lat"></span> <span id="long"></span> </div> <script type="text/javascript"> function supports_geolocation() { return !!navigator.geolocation; } function get_location() { if ( supports_geolocation() ) { navigator.geolocation.getCurrentPosition(show_map, handle_error); } else { // no native support; $("#msg").text('您的浏览器不支持HTML5 geolocation功能!'); } } function show_map(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // let's show a map or do something interesting! $("#geo-wrapper").css({'width':'956px','height':'400px'}); var latlng = new google.maps.LatLng(latitude, longitude); var myOptions = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("geo-wrapper"), myOptions); var marker = new google.maps.Marker({ position: latlng, title:"You are here (more or less)!" }); // To add the marker to the map, call setMap(); marker.setMap(map); $("#msg").text('确定您的经纬度：'); $("#lat").text('经度：' + latitude); $("#long").text('维度：' + longitude); } function handle_error(err) { if (err.code == 1) { // user said no! $("#msg").text('只有选择共享您的个人位置信息才能使用本功能。'); } } get_location(); </script> </body> </html>
这篇关于[HTML5 特效] HTML5 geolocation功能确定你当前所在的地理位置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
