<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="demo">点击这个按钮,获得您的位置</p>
<button onclick="getLocation()">试一下</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
 
function showPosition(position)
  {
  lat=position.coords.latitude;
  lon=position.coords.longitude;
  latlon=new google.maps.LatLng(lat, lon)
  mapholder=document.getElementById('mapholder')
  mapholder.style.height='250px';
  mapholder.style.width='500px';
 
  var myOptions={
  center:latlon,zoom:14,
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  mapTypeControl:false,
  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  };
  var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
  var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
  }
function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }
</script>
</body>
</html>

html5获取当前的位置..在地图中的更多相关文章

  1. html5获取用户当前位置

    支持地理定位的浏览器有IE9+.Firefox 3.5+ .Opera 10.6+ .Safari 5+ .Chrome.iOS 版Safari.Android版WebKit. navigator.g ...

  2. 使用html5获取当前手机的经纬度，并接入百度地图API，查询出当前位置

    最近项目需要,稍微研究一下html5获取当前地理位置的问题. 获取当前位置的经纬度很简单,一句代码就搞定 navigator.geolocation.getCurrentPosition(functi ...

  3. WKWebView中HTML5获取位置失败

    WKWebView中HTML5获取位置失败,在info.plist文件中添加以下代码打开网页时就会询问是否允许获取位置信息了. <key>NSLocationAlwaysUsageDesc ...

  4. 利用HTML5 Geolocation API在百度地图中显示你的位置

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <met ...

  5. 使用Socket通信实现Silverlight客户端实时数据的获取(模拟GPS数据，地图实时位置)

    原文:使用Socket通信实现Silverlight客户端实时数据的获取(模拟GPS数据,地图实时位置) 在上一篇中说到了Silverlight下的Socket通信,在最后的时候说到本篇将会结合地图. ...

  6. html5获取位置信息,h5获取位置信息

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. js获取控件位置以及不同浏览器中的差别

    js获取控件位置(坐标位置)在不同浏览器中的差别. //获取坐标位置 function getpos(e) { var t=e.offsetTop; var l=e.offsetLeft; var h ...

  8. HTML5获取地理经纬度并通过百度接口得到实时位置

    注:用的时候将获取北京位置那放到获取经度纬度后面即可 -----------实际用的时候的代码如下:start  -------- var myCity;getLocation()function g ...

  9. C#+ArcGIS Engine 获取地图中选中的要素

    转自 C#+ArcGIS Engine 获取地图中选中的要素 C#+ArcGIS Engine 获取地图中选中的要素 提供一种简单遍历获取地图中选中要素的方法,代码如下: List<IFeatu ...

随机推荐

  1. Status Code:405 Method Not Allowed

    场景: 前端调用方法的时候,调不通,并且报错信息为405 因为我们公司前后端分离开发,于是前端就来找我说我写的接口有问题?于是我就在这里的postman中测试发现没问题啊. 然后我好好看了一下报错信息 ...

  2. 将*.sql数据库脚本导入到sqlserver中（sql文件导入sqlserver）

    在SqlServer中这个是用生成sql脚本生成的 要是在导入数据库用数据导入/导出向导导不进去 其实要用查询分析器来打开sql文件 然后执行就可以了

  3. 批量压缩文件.net

    C#调用 ICSharpCode.SharpZipLib.Zip 实现解压缩功能公用类 最近想用个解压缩功能 从网上找了找 加自己修改,个人感觉还是比较好用的,直接上代码如下 using System ...

  4. iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 视图Nunjucks

    视频地址:https://www.cctalk.com/v/15114923888328 视图 Nunjucks 彩虹是上帝和人类立的约,上帝不会再用洪水灭人. 客户端和服务端之间相互通信,传递的数据 ...

  5. ArcMap导入图层出现General function failure问题

    问题描述: 使用ArcMap的FeatureClassToFeatureClass命令导入图层,出现如下图的错误提示: 解决方法: 参考http://forums.esri.com/thread.as ...

  6. 【Java】JVM（三）、Java垃圾收集器

    一.Minor GC.Major GC 和 Full GC Minor GC:清理新生代空间,当Eden空间不能分配时候引发Minor GC Major GC:清理老年代空间 Full GC:清理Ja ...

  7. CentOS6.5下安装ActiveMQ

    1.下载ActiveMQ [root@localhost softwares]# wget http://archive.apache.org/dist/activemq/apache-activem ...

  8. ThreadPoolExecutor的execute源码分析

    上一篇文章指出,ThreadPoolExecutor执行的步骤如下: 向线程池中添加任务,当任务数量少于corePoolSize时,会自动创建thead来处理这些任务: 当添加任务数大于corePoo ...

  9. 【校招面试 之 C/C++】第11题 C++ 纯虚函数

    1.纯虚函数 成员函数的形参后面写上=0,则成员函数为纯虚函数. 纯虚函数声明: virtual 函数类型 函数名 (参数表列) = 0: class Person { virtual void Di ...

  10. centos安装Python插件后找不到对应的插件ModuleNotFoundError: No module named*

    题记 在之前的文章中,我在centos服务器装了python3并且给python与pip建立了软链,利用git上传代码到centos服务器之后利用终端运行app.py的时候会报错. 报错: [root ...