javascript使用百度地图api和html5特性获取浏览器位置


Posted in Javascript onJanuary 10, 2014
<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮,获得您的位置:</p>
<button onclick="getLocation()">试一下</button>
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
<script>
var x=document.getElementById("demo");
function getLocation(){
    if(navigator.geolocation){
       navigator.geolocation.getCurrentPosition(showPosition);
      }else{
       alert("您的浏览器不支持地理定位");
      }
   }
function showPosition(position){
    lat=position.coords.latitude;
    lon=position.coords.longitude;
    //var map = new BMap.Map("container");            // 创建Map实例
    var point = new BMap.Point(lon, lat);    // 创建点坐标
    //map.centerAndZoom(point,15);                     // 
    //map.enableScrollWheelZoom(); 
    var gc = new BMap.Geocoder();    
    gc.getLocation(point, function(rs){
       var addComp = rs.addressComponents;
       alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);
      });
   }
</script>
</body>
</html>
Javascript 相关文章推荐
javascript 事件处理程序介绍
Jun 27 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
Redis基本知识、安装、部署、配置笔记
Mar 05 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 #Javascript
深入理解JSON数据源格式
Jan 10 #Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 #Javascript
Script标签与访问HTML页面详解
Jan 10 #Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 #Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 #Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 #Javascript
You might like
无线电广播的开始
2002/01/30 无线电
第六节 访问属性和方法 [6]
2006/10/09 PHP
用PHP连接Oracle数据库
2006/10/09 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
python设置windows桌面壁纸的实现代码
2013/01/28 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
实例讲解Python3中abs()函数
2019/02/19 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
实习自我评价怎么写
2013/12/02 职场文书
学期研究性学习个人的自我评价
2014/01/09 职场文书
网络研修随笔感言
2014/02/17 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
走进毛泽东观后感
2015/06/04 职场文书
结婚典礼致辞
2015/07/28 职场文书
获奖感言怎么写
2015/07/31 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python