js+html5获取用户地理位置信息并在Google地图上显示的方法


Posted in Javascript onJune 05, 2015

本文实例讲述了js+html5获取用户地理位置信息并在Google地图上显示的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your position:</p>
<button onclick="getLocation()">Try It</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)
 {
 var latlon=position.coords.latitude+","+position.coords.longitude;
 var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
 +latlon+"&zoom=14&size=400x300&sensor=false";
 document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
 }
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>

希望本文所述对大家的web程序设计有所帮助。

Javascript 相关文章推荐
FireFox JavaScript全局Event对象
Jun 14 Javascript
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
vue中@change兼容问题详解
Oct 25 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
用JS实现选项卡
Mar 23 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 #Javascript
JavaScript中toString()方法的使用详解
Jun 05 #Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 #Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 #Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 #Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 #Javascript
判断访客终端类型集锦
Jun 05 #Javascript
You might like
PHP 选项及相关信息函数库
2006/12/04 PHP
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
学习php开源项目的源码指南
2014/12/21 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
python 多线程实现检测服务器在线情况
2015/11/25 Python
python MySQLdb使用教程详解
2018/03/20 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
python 实现图片裁剪小工具
2021/02/02 Python
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
安全协议书范本
2014/04/21 职场文书
网络优化专员求职信
2014/05/04 职场文书
专项法律服务方案
2014/06/11 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
酒店前台岗位职责
2015/04/16 职场文书
羊脂球读书笔记
2015/06/30 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers