公司有个需求，需要获取用户的位置，所以看了下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. StreamReader和StreamWriter中文乱码问题

    StreamReader和StreamWriter中文乱码问题 1.写入: string  FilePath = @"E:\Measure.csv"; StreamWriter w ...

  2. centos+nginx+redmine+gitosis安装指南

    说明 这篇文章我现在的主要目的是记录自己安装redmine和gitosis的过程,可能写的有些糙,请各位读者见谅.我会在后面的时间里逐渐完善细节.但我想,这已经是网上迄今为止国内最详细的nginx+r ...

  3. 【转载】图解Java常用数据结构(一)

    图解Java常用数据结构(一)  作者:大道方圆 原文:https://www.cnblogs.com/xdecode/p/9321848.html 最近在整理数据结构方面的知识, 系统化看了下Jav ...

  4. Cortex-M3(NXP LPC 1788) 启动代码

    startup_LPC177x_8x.s启动代码分析. 参考资料: Cortex-M3 (NXP LPC1788)之启动代码分析 ARM启动过程(Cortex-M3 NXP LPC1768为例) ;/ ...

  5. 采用c#实现功能1

    看了好多c#的菜鸟教程不如自己开始动手打代码,最终实现了功能一,参考了网上的wordcount代码发现无论是c++还是c#大部分采用的是哈希表的方法实现的,本来还想仅用循环实现遍历句子中的所有字符,即 ...

  6. Beta版本软件使用说明

    北京航空航天大学计算机学院 远航1617 小组 产品版本: Beta版本 产品名称:Crawling   is going on 文档作者:杨帆 文档日期:2013/12/24 1.   引言 1.1 ...

  7. 【转】c++面试基础

    1,关于动态申请内存 答:内存分配方式三种: (1)从静态存储区域分配:内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在. 全局变量,static变量. (2)在栈上创建:在执行函 ...

  8. C#语言使用redis

    文章:Redis总结(二)C#中如何使用redis 文章:Redis总结(三)Redis 的主从复制 文章:Redis总结(四)Redis 的持久化

  9. css3边框阴影效果

    下面来说下css3阴影的语法: box-shadow:none | <shadow> [ , <shadow> ]* <shadow> = inset? & ...

  10. 了解Solr

    Solr 简 介 采用Java开发,基于Lucene的全文搜索服务器.同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展并对查询性能进行了优化,并且提供了一个完善的功 ...