公司有个需求，需要获取用户的位置，所以看了下html5的Geolocation 这个新东西，发现挺好用的。

<!DOCTYPE html>

<html>

<body>

<p id="demo">点击这个按钮，获得您的坐标：</p>

<button onclick="getLocation()">试一下</button>

<script>

var x=document.getElementById("demo");

function getLocation()

  {

  if (navigator.geolocation)

    {

    navigator.geolocation.getCurrentPosition(showPosition);

    }

  else{x.innerHTML="Geolocation is not supported by this browser.";}

  }

function showPosition(position)

  {

  x.innerHTML="Latitude: " + position.coords.latitude +

  "<br />Longitude: " + position.coords.longitude;

  }

</script>

</body>

</html>

　　上面代码运行后，先会弹出，是否允许获取您的当前地理位置，如果你点击确定，那么就会得到你当前位置的坐标，那么我们就可以把这个坐标显示到地图上了。

最好是用高德地图的，因为高德地图的坐标和谷歌地图的坐标是一致的，不需要进行坐标转换，百度地图就不行，需要转换坐标，又是一大堆代码。

使用html5的Geolocation API实现定位的更多相关文章

  1. HTML5 Geolocation API地理定位整理（二）

    Geolocation 实例demo 1.使用watchPosition()监听客户端位置 var watchOne=null; if (navigator.geolocation) { //watc ...

  2. HTML5 Geolocation API地理定位整理（一）

    HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Internet Explorer 9+, ...

  3. Geolocation API

    Geolocation API--地理定位 navigator.geolocation getCurrentPosition() 触发请求用户共享地理定位信息的对话框 接收3个参数: 1.成功回调函数 ...

  4. html5 geolocation配合百度地图api实现定位

    1.了解html5 geolocation HTML5 Geolocation(地理定位)用于定位用户的位置.鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的.=> 使用时 ...

  5. HTML5地理定位-Geolocation API

    HTML5提供了一组Geolocation API,来自navigator定位对象的子对象,获取用户的地理位置信息Geolocation API使用方法:1.判断是否支持 navigator.geol ...

  6. html5 geolocation API

    清单 1. 检查浏览器支持性if (navigator.geolocation) 清单 2. 单次定位请求 API void getCurrentPosition(updateLocation, op ...

  7. HTML5 Geolocation API工作原理[转载]

    大家都知道,HTML5 Geolocation 可以使用 IP 地址.基于 Web 的数据库.无线网络连接和三角测量或 GPS 技术来确定经度和纬度. 问题: 在一个基于地理位置服务的个人业余项目(小 ...

  8. HTML5 学习06——Geolocation（地理定位）

    HTML5 Geolocation(地理定位) HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. HTML ...

  9. HTML5 Geolocation用来定位用户的位置。

    HTML5 Geolocation用来定位用户的位置. 定位用户的位置 HTMl5 Geolocation API用来得到用户的地理位置. 由于这个可能和个人隐私相关.除非用户同意否则不能使用. 浏览 ...

随机推荐

  1. Python面向对象-访问限制

    在Class内部,可以有字段,方法和属性,而外部代码可以通过直接调用实例变量的方法来操作数据, (1)私有普通字段 比如对于下面的Student类,name字段可以在外面通过对象进行直接访问: cla ...

  2. shiro控制登陆成功后跳回之前的页面

    登陆之后跳回之前的页面是在做登陆注册模块时遇到的一个需求,也是很有必要的.若用户直接访问登陆页面,那可以控制它直接到首页,但是要用户没有登陆直接访问自己的购物车等需要经过身份认证的页面,或者因为ses ...

  3. java---迭代器（Iterator）

    迭代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结构.迭代器通常被称为“轻量级”对象,因为创建它的代价小. Java中的Iterator功能比较简单, ...

  4. extract函数行结果

    $arr2=array('a'=>'aaaa','b'=>'bbbb','c'=>'cccc','d'=>'dddd','e'=>'eeeee','b'=>'fff ...

  5. 第24天：js-函数变量声明提升

    一.函数声明1.自定义函数function fun1(){ alert("我是自定义函数");}fun2();//函数不调用,自己不执行2.直接量声明var fun2=functi ...

  6. matlab imwrite

    函数功能:将图像数据写入到图像文件中,存储在磁盘上. 调用格式:imwrite(A,filename,fmt) A是图像数据,filename是目标图像名字,fmt是要生成的图片的格式. 图片格式有: ...

  7. BZOJ4867 Ynoi2017舌尖上的由乃（dfs序+分块）

    容易想到用dfs序转化为序列上的问题.考虑分块,对每块排序,修改时对于整块打上标记,边界暴力重构排序数组,询问时二分答案,这样k=sqrt(nlogn)时取最优复杂度nsqrt(nlogn)logn, ...

  8. hdu 3339 In Action (最短路径+01背包)

    In Action Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  9. hdu 2686 Matrix && hdu 3367 Matrix Again (最大费用最大流)

    Matrix Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  10. Python正则表达式re模块

    re.compile(pattern,flags=0)将正则表达式编译成正则表达式对象.可以使用match()和search()方法进行匹配.对于常用的表达式可以先进行编译,后续可多次使用以提高效率. ...