基于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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
Jun 19 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
jquery图形密码实现方法
Mar 11 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 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
PHP代码审核的详细介绍
2013/06/13 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
详解如何运行vue项目
2019/04/15 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
Python中为什么要用self探讨
2015/04/14 Python
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
python中返回矩阵的行列方法
2018/04/04 Python
Python2包含中文报错的解决方法
2018/07/09 Python
原生python实现knn分类算法
2019/10/24 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
师范院校学生自荐信范文
2013/12/27 职场文书
春节活动策划方案
2014/01/24 职场文书
护士自我鉴定总结
2014/03/24 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python