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 delete 使用示例代码
Mar 29 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
基于JavaScript实现表格隔行换色
May 08 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实现汉字验证码和算式验证码的方法
2015/03/07 PHP
php文件读取方法实例分析
2015/06/20 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
浅谈Vue数据绑定的原理
2018/01/08 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
在Django的模型中添加自定义方法的示例
2015/07/21 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
Python高并发和多线程有什么关系
2020/11/14 Python
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
篮球社团活动总结
2014/06/27 职场文书
学校计划生育责任书
2015/05/09 职场文书
公司员工奖惩制度
2015/08/04 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
python缺失值的解决方法总结
2021/06/09 Python