1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.         <title>location</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <meta name="viewport"
  7.               content="width=device-width;
  8.               initial-scale=1.0;
  9.               maximum-scale=1.0;
  10.               user-scalable=0;
  11.               target-densitydpi=device-dpi;"/>
  12.     </head>
  13. <body>
  14. <p id="demo">点击这个按钮，获得您的坐标：</p>
  15. <button onclick="getLocation()">试一下</button>
  16. <div id="mapholder"></div>
  17. <script src="http://maps.google.com/maps/api/js?sensor=false">
  18. </script>
  19. <script>
  20. var x=document.getElementById("demo");
  21. function getLocation()
  22.   {
  23.   if (navigator.geolocation)
  24.     {
  25.     navigator.geolocation.getCurrentPosition(showPosition,showError,{enableHighAccuracy:false,maximumAge:1000,timeout:15000});
  26.     }
  27.   else{x.innerHTML="Geolocation is not supported by this browser.";}
  28.   }
  29. function showPosition(position)
  30.   {
  31.   x.innerHTML="Latitude: " + position.coords.latitude +
  32.   "<br />Longitude: " + position.coords.longitude;
  33.   }
  34.   function showError(error){
  35.   switch(error.code){
  36.   case error.PERMISSION_DENIED:
  37. 	x.innerHTML="User denied the request for Geolocation";
  38.   break;
  39.   case error.POSITION_UNAVAILABLE:
  40.     x.innerHTML="Location information is unavailable";
  41.   break;
  42.   case error.TIMEOUT:
  43.     x.innerHTML="The request to get user location timed out";
  44.   break;
  45.   case error.UNKNOWN_ERROR:
  46.     x.innerHTML="An unknown error occurred.";
  47.   break;
  48.   }
  49.   }
  50. </script>
  51. </body>
  52. </html>

JavaScript 获得 坐标的更多相关文章

  1. javascript事件坐标

    clientX 鼠标在页面显示区域的坐标 screenX鼠标在显示屏幕上的坐标 layerX 鼠标相对于“触发事件的元素的层级关系中离该元素最近的,设置了position的父元素”的边界的位置,从bo ...

  2. javascript获取坐标/滚动/宽高/距离

    坐标(鼠标/触摸) event.screenX 鼠标/触摸,相对于显示屏的X坐标 event.screenY 鼠标/触摸,相对于显示屏的Y坐标 event.clientX 鼠标/触摸,相对于浏览器视口 ...

  3. JavaScript事件坐标区别（offset，client，page）

    学习笔记. 1. offset:其定位原点是当前元素左上角 2. client:其定位原点是当前窗口左上角 3. page:其定位原点是当前页面左上角 下面来验证一下. 先上代码: <!doct ...

  4. 微信JS-SDK坐标位置转换为百度地图坐标

    微信JS-SDK开发过程中,使用getLocation获取坐标位置,如何将微信获取的坐标直接应用到百度地图中,显示以下效果: 说明:红色图标是从微信转换过来的位置,蓝色图标是周边位置.首先从微信开发流 ...

  5. GPS坐标换算为百度坐标

    最近在做一个关于手机定位的小应用,需求是这样的,用户通过手机(Wp8)进行二维码扫描操作并且记录用户的当前位置,在PC上可以查看用户所在地图的位置,做法就是在用户扫描条码时,通过手机GPS获取当前在地 ...

  6. GPS转换为百度坐标

    原文地址:http://www.cnblogs.com/zhaohuionly/archive/2013/06/18/3142623.html 最近在做一个关于手机定位的小应用,需求是这样的,用户通过 ...

  7. GPS坐标换算为百度坐标(转)

    最近在做一个关于手机定位的小应用,需求是这样的,用户通过手机(Wp8)进行二维码扫描操作并且记录用户的当前位置,在PC上可以查看用户所在地图的位置,做法就是在用户扫描条码时,通过手机GPS获取当前在地 ...

  8. GPS坐标与百度坐标转换

    百度对外接口的坐标系,都是经过国家测绘局加密处理,符合国家测绘局对地理信息保密要求. 国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ- 02,对地理位置进行首次加密.百度坐标在此 ...

  9. !!代码：baidu地图

    http://map.baidu.com/mobile/  手机开发时,嵌入地图可以嵌入这个网址!! http://developer.baidu.com/map/lbs-cloud.htm 百度地图 ...

随机推荐

  1. React-使用Redux-thunk中间件实现ajax数据请求

    把异步函数放在生命周期函数里写,生命周期函数会变得越来越复杂,组件会变得越来越大.Redux默认只处理同步,借助redux-thunk ,可以把异步请求放在actionCreators.js里管理,而 ...

  2. 懒人小工具1：winform自动生成Model,Insert,Select,Delete以及导出Excel的方法

       懒人小工具2:T4自动生成Model,Insert,Select,Delete以及导出Excel的方法    github地址:https://github.com/Jimmey-Jiang/J ...

  3. CSS 边框(border)实例

    CSS 边框(border)实例:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS 边框属性属性 描述bo ...

  4. sqli-labs less 5-6

    sqli-labs less 5-6 从源代码中可以看到,运行返回结果正确的时候只返回you are in....,不会返回数据库当中的信息了,以前的union联合查询就不能用了,开始尝试盲注. 简单 ...

  5. restfull环境搭建-helloword（三）

    原文地址:http://only81.iteye.com/blog/1689537 This section creates a CRUD (Create, Read, Update, Delete) ...

  6. 网络编程学习笔记：Socket编程

    文的主要内容如下: 1.网络中进程之间如何通信? 2.Socket是什么? 3.socket的基本操作 3.1.socket()函数 3.2.bind()函数 3.3.listen().connect ...

  7. linux 第七周 总结及实验

    姬梦馨 原创作品 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 第七周 Linux内核如何装载和启动一 ...

  8. 2017-2018-2 1723《程序设计与数据结构》第八周作业 & 实验二 & 第一周结对编程 总结

    作业地址 第八周作业:https://edu.cnblogs.com/campus/besti/CS-IMIS-1723/homework/1847 (作业界面已评分,可随时查看,如果对自己的评分有意 ...

  9. Opentsdb分布式安装

    Opentsdb分布式安装 --李琦 1．下载文件上传到虚拟机 -rw-r--r--.  1 root   root  76793860 Apr 27 10:56 opentsdb-2.2.0.tar ...

  10. 第三个Sprint ------第六天

    分数计算界面代码 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:a ...