基于JavaScript定位当前的地理位置


Posted in Javascript onApril 11, 2017

本文实例为大家分享了js定位当前地理位置的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>Title</title>
</head>
<body>
您目前在<p></p>
</body>
<script>
  //定义一个空的位置构造函数
  function Location(){};
  //定义一个可以获得经纬度的方法
  Location.prototype.getLocation = function(callback){
    var options = {
      enableHighAccuracy: true,
      maximumAge: 1000
    };
    this.callback = Object.prototype.toString.call(callback) =="[object Function]" ?
        callback :
        function(address){
          alert(address.province + address.city);
          console.log("getocation(callbackFunction) 可获得定位信息对象");
        };
    var self = this;
    if (navigator.geolocation) {
      //浏览器支持geolocation
      navigator.geolocation.getCurrentPosition(function(position){
        //经度
        var longitude = position.coords.longitude;
        //纬度
        var latitude = position.coords.latitude;
        self.loadMapApi(longitude,latitude);
      }, self.onError, options);
    } else {
      //浏览器不支持geolocation
    }
  };
  //定义一个可以解析经纬度的方法,调用百度的api
  Location.prototype.loadMapApi = function(longitude, latitude){
    var self = this;
    var oHead = document.getElementsByTagName('HEAD').item(0);
    var oScript= document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src="http://api.map.baidu.com/getscript?v=2.0&ak=A396783ee700cfdb9ba1df281ce36862&services=&t=20140930184510";
    oHead.appendChild(oScript);
    oScript.onload = function(date){
      var point = new BMap.Point(longitude, latitude);
      var gc = new BMap.Geocoder();
      gc.getLocation(point, function(rs) {
        var addComp = rs.addressComponents;
        self.callback(addComp);
      });
    }
  };
  //定义出现查询位置出现意外的方法
  Location.prototype.onError = function(error) {
    switch (error.code) {
      case 1:
        alert("位置服务被拒绝");
        break;
      case 2:
        alert("暂时获取不到位置信息");
        break;
      case 3:
        alert("获取信息超时");
        break;
      case 4:
        alert("未知错误");
        break;
    }
  };
  //调用
  var local = new Location();
  local.getLocation(function(res){
    var str=""
    for(i in res ){
      str=res[i]+str
    }
    document.querySelector("p").innerHTML=str;
  })
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 Javascript
js模拟支付宝密码输入框
Apr 11 #Javascript
基于jQuery实现瀑布流页面
Apr 11 #jQuery
详解angular用$sce服务来过滤HTML标签
Apr 11 #Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 #Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 #Javascript
js 获取今天以及过去日期
Apr 11 #Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 #Javascript
You might like
基于文本的搜索
2006/10/09 PHP
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
python脚本定时发送邮件
2020/12/22 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
电气个人求职信范文
2014/02/04 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技