公司有个需求，需要获取用户的位置，所以看了下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. DataTable转Json,Json转DataTable

    // 页面加载时 /// </summary> /// <param name="sender"></param> /// <param ...

  2. MyBatis 插件 : 打印 SQL 及其执行时间

    Plugins 摘一段来自MyBatis官方文档的文字. MyBatis允许你在某一点拦截已映射语句执行的调用.默认情况下,MyBatis允许使用插件来拦截方法调用: Executor(update. ...

  3. js如何处理字符串中带有↵字符

    js或vue中如何处理字符串中带有↵字符 split('\n') 使用split('\n')将字符串分割成数组就行 如果我们在vue中,只需要在页面中绑定变量时操作split('\n')就可以了: & ...

  4. 推荐形参使用常量引用：void func(const T &);

    一.声明为const的原因: 把函数不会改变的形参定义成普通的引用会带给函数的调用者一种误导,即函数可以修改它的实参的值: 限制函数所能接受的实参类型,如不能把const对象.字面值或者需要类型转换的 ...

  5. Mr. Frog’s Game（模拟连连看）

    Description One day, Mr. Frog is playing Link Game (Lian Lian Kan in Chinese). In this game, if you ...

  6. activiti工作流已办和待办查询sql

    最近项目中遇到一个问题,需要activiti的工作流表和业务表关联分页查询,然而我对于工作流的查询并不太熟悉,所以学习并总结如下. 想看看activiti到底怎么查询的待认领和待办.已办的查询sql, ...

  7. c++ 第五次作业（计算器第三步）

    第五次作业 (计算器第三步) 项目源文件地址:calculator 本次作业改进情况 加入多种读入选择 正常输出答案 -a 选项,输出表达式以及值 -f 选项,从指定文件读入,并把答案输出到指定文件 ...

  8. java中 i = i++和 j = i++ 的区别

    由于i++和i--的使用会导致值的改变,所以在处理后置的++和--的时候,java的编译器会重新为变量分配一块新的内存空间,用来存放原来的值, 而完成赋值运算之后,这块内存会被释放. (1)对于j = ...

  9. IT启示录

    引用电影<夏洛特烦恼>中夏洛的一句话:"一直以来,我根本就不知道自己想要什么".可以说在写这篇博客之前我仍然没有考虑清楚之后的道路,即使早已明确了走游戏开发的道理,却不 ...

  10. shmem：

    在/proc/meminfo中发现,cached不等于ActiveFile + InActiveFile,我们来看看cache到底都包括啥内存 1)首先肯定包含activeFile 和 inactiv ...