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 相关文章推荐
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 Javascript
js前端图片加载异常兜底方案
Jun 21 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
Php注入点构造代码
2008/06/14 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
php查询whois信息的方法
2015/06/08 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
js实现文字滚动效果
2016/03/03 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
python线程池的实现实例
2013/11/18 Python
python实现数据图表
2017/07/29 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
python中的itertools的使用详解
2020/01/13 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
古驰英国官网:GUCCI英国
2020/03/07 全球购物
端午节粽子促销活动方案
2014/02/02 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
单位工作证明范文
2014/09/14 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis