HTML5 里面引入了geolocation的API可以帮助用户获得浏览器所在的地理位置，它不仅可以标示出当前的经纬度，还可以与google map API结合使用来在地图上标示出当前位置。
HTML代码，主要就是2大块，第一部分的容器用于放google地图和标示位置，第二部分用于显示精确的经纬度以及精度（误差）。
- <!DOCTYPE HTML>
- <html>
- <head>
- <!-- 以下这段代码是googlemap官方建议的，它让用户禁止利用浏览器的放大缩小窗口功能，而使用googlemap自己的缩放功能 -->
- <meta name="viewport" content="initial-scale=1.0,user-scalable=no"/>
- <title>在页面上使用Google Map，获取浏览器的当前位置</title>
- <!-- 因为页面上要使用到google地图，所以导入googlemap地图文件 -->
- <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
- <!-- 这段js文件是我自己写的，用于利用HTML5的geolocation API获得当前位置，并且在google地图上标识出来 -->
- <script type="text/javascript" src="js/googlemap.js"></script>
- </head>
- <body onload="init()">
- Hello,Google Map!
- <br>
- <!-- 这一个正方形区域是用来画google地图的 -->
- <div id="map"style="width: 400px; height: 400px"></div>
- <br>
- <!-- 这一个区域是用来显示你的位置信息的 -->
- <h3>您的浏览器显示了您当前的地理位置信息是:</h3>
- <p id="positionInfo"></p>
- </body>
- </html>
javascript方法，主要就是用于绘制地图（以及标示位置），以及给出了当获取位置成功或者失败时候的回调函数定义：
- //这是初始化方法，用来绘制google地图
- function init() {
- console.log("entering the init() method");
- //首先必须判断浏览器是否有geolocation属性，因为HTML5 才新增了这个属性，不是所有浏览器都支持
- if (navigator.geolocation) {
- //如果浏览器支持geolocation，则使用geolocation的getCurrentLocation方法来取得用户当前的地理位置，
- //并且在成功取得之后调用show_map()回调函数
- console.log(' Browser support geolocation ');
- navigator.geolocation.getCurrentPosition(show_map,handle_error ,null);
- } else {
- console.log(' Browser doesnt support geolocation ');
- }
- }
- //这是一个回调函数，用于当geolocation成功取得用户浏览器所在的地理位置时候的响应，它吧所有的位置信息封装在position中
- //所以我们就需要解析position来取得用户的详细信息
- function show_map(position) {
- // 取得当前的地理位置
- var coords = position.coords;
- //Part 1; 显示用户的精确位置信息
- //取得页面上用于显示精确位置信息的组件
- var positionInfo=document.getElementById("positionInfo");
- var positionString="经度: "+coords.longitude+"<br>";
- positionString+="维度: "+coords.latitude+"<br>";
- var altitude=coords.altitude;
- if( altitude!=null){
- positionString+="海拔高度"+coords.altitude+"<br>";
- }
- positionString+="经纬度精确到："+coords.accuracy+"米"+"<br>";
- positionInfo.innerHTML=positionString;
- //Part 2; 在google地图上显示浏览器的当前位置
- // 设定地图参数，将用户的当前位置的维度和精度都设定为地图的中心点
- var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
- var myOptions = {
- // 设定放大倍数
- zoom : 14,
- // 将地图的中心点设定为指定的坐标点
- center : latlng,
- // 指定地图的类型，这里选择的是街道地图
- mapTypeId : google.maps.MapTypeId.ROADMAP
- };
- // 创建地图并在"map"div中显示，吧这个地图叫做map1
- var map1;
- map1 = new google.maps.Map(document.getElementById("map"), myOptions);
- // 在地图上创建标记
- var marker = new google.maps.Marker({
- //标注刚才创建的标注点，因为标注点是由当前的经纬度设定的，所以表示了当前位置
- position : latlng,
- //标注在哪张地图上，我们创建了map1作为google map，所以标注在map1上
- map : map1
- });
- // 设定标注窗口，并且指定该窗口的注释文字
- var infowindow = new google.maps.InfoWindow({
- content : "这是Charles的浏览器的当前位置!"
- });
- // 打开标注窗口
- infoWindow.open(map1, marker);
- }
- //这是第二个回调函数，用于当geolocation获取用户浏览器所在的地理位置失败时候的响应
- //error对象封装了所有的可能出现的无法获得地理位置的错误信息，并且HTML5为其预留了错误码，可以取值{1,2,3}
- function handle_error(error){
- var errorTypes={
- 1:'位置服务被拒绝',
- 2:'获取不到位置信息',
- 3:'获取信息超时'
- };
- console.log(errorTypes[error.code] + ":,不能确定你的当前地理位置");
- }
要显示结果，必须让用户开启共享位置功能，因为这是隐私，我测试了下Opera 11和Firefox 10 ，Google Chrome都可以。
Opera 11开始就需要用户选择是否要共享地理位置：
然后要签一份用户协议：
对于Firefox浏览器，也是需要得到用户共享自己位置的许可：
最终，就可以显示用户当前位置了（实际是你的ip暴露了你的信息），比如我住在上海广兰路地铁站附近，所以显示结果如下：
本文转自 charles_wang888 51CTO博客，原文链接：http://blog.51cto.com/supercharles888/856656，如需转载请自行联系原作者
