我们在开发过程中有时会需要获取客户端的所在位置，例如现在流行的o2o平台，展现店铺列表等，获取位置后可以推荐相应的附近商家，这个尤为重要。
由于这些需求大多用在移动端，而移动端浏览器对html5特性支持都非常好，这里我们使用html5来实现这个功能，下面听cms大学小编细细道来。
我们直接给出演示代码：
折叠XML/HTML 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>CMS大学利用html5获取经纬度</title>
- </head>
- <body>
- <span id="support">将下面的经纬度输入谷歌地图：</span>
- <div id="show">
- 纬度：<span id="latitude"></span><br />
- 经度：<span id="longitude"></span><br />
- 准确度：<span id="accuracy"></span>
- </div>
- <script type="text/javascript">
- var doc = document,
- latitude = doc.getElementById('latitude'),
- longitude = doc.getElementById('longitude'),
- accuracy = doc.getElementById('accuracy'),
- support = doc.getElementById('support'),
- showDiv = doc.getElementById('show');
- function lodeSupport(){
- if(navigator.geolocation){
- support.innerHTML = '将下面的经纬度输入谷歌地图(纬度 经度)查看自己位置：';
- showDiv.style.display = 'block';
- navigator.geolocation.getCurrentPosition(updataPosition);
- }else{
- support.innerHTML = '对不起，浏览器不支持！';
- showDiv.style.display = 'none';
- }
- }
- function updataPosition(position){
- var latitudeP = position.coords.latitude,
- longitudeP = position.coords.longitude,
- accuracyP = position.coords.accuracy;
- latitude.innerHTML = latitudeP;
- longitude.innerHTML = longitudeP;
- accuracy.innerHTML = accuracyP;
- }
- window.addEventListener('load', lodeSupport , true);
- </script>
- </body>
- </html>
代码很少，还是html5用起来简单快捷，接下来我们可以将取到的经纬度用于后续开发。
IE下的获取效果演示：
pc端其他浏览器，如chrome、firefox等无法获取（这个受操作系统、防火墙、使用时间等因素影响），手机端获取正常，而且定位精度非常完美。
我们可以用获得的数据开发百度lbs云检索、行业门户特定信息推送等。
Tags： html5
