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 相关文章推荐
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
vue项目中导入swiper插件的方法
Jan 30 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
浅谈vue项目打包优化策略
Sep 29 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 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使用wordwrap格式化文本段落的方法
2015/03/17 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
PHP实现倒计时功能
2020/11/16 PHP
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
django 创建过滤器的实例详解
2017/08/14 Python
python制作简单五子棋游戏
2019/06/18 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
几道PHP的面试题
2012/05/19 面试题
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
打架检讨书400字
2014/01/17 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
维稳工作情况汇报
2014/10/27 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python