HTML5 地理位置的获取（精确）

最新推荐文章于 2024-08-08 23:45:45 发布

weixin_30776545

最新推荐文章于 2024-08-08 23:45:45 发布

阅读量561

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/senhero/p/4033348.html

版权

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>