HTML5 地理位置的获取 (精确)

html5地理位置的获取 网上看到的效果 果断应该分享下 

<!DOCTYPE html>
<html lang="zh-cn"> 
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title></title>  
<style type="text/css">    
*{height: 100%; //设置高度,不然会显示不出来}  
</style>        
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>  
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script> 
<script>      
    $(function(){       
        navigator.geolocation.getCurrentPosition(translatePoint);  //定位     
    });    
    function translatePoint(position){       
      var currentLat = position.coords.latitude;     
      var currentLon = position.coords.longitude;       
      var gpsPoint = new BMap.Point(currentLon, currentLat);        
      BMap.Convertor.translate(gpsPoint, 0, initMap);  //转换坐标      
    }      
    function initMap(point){        //初始化地图        
      map = new BMap.Map("map");        
      map.addControl(new BMap.NavigationControl());        
      map.addControl(new BMap.ScaleControl());        
      map.addControl(new BMap.OverviewMapControl());        
      map.centerAndZoom(point, 15);        
      map.addOverlay(new BMap.Marker(point))     
    }    
</script> 
</head>  
<body>   
<div id="map"></div> 
</body>
</html>

测试以后地理位置精确

posted @ 2014-10-18 16:45  城市码农  阅读(827)  评论(0编辑  收藏  举报