您的位置：首页 > Web前端 > HTML5

[HTML5 特效] HTML5 geolocation功能确定你当前所在的地理位置

2017-04-11 20:21 597 查看

HTML5 geolocation功能能够通过浏览器确定你当前所在的地理位置,当浏览器弹出提示问是否允许共享方位信息的时候请选择允许，目前IE9不支持，请使用Chrome或者Firefox、Opear等！

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航