基于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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
axios学习教程全攻略
Mar 26 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
jQuery弹框插件使用方法详解
2020/05/26 jQuery
jquery实现简易验证插件封装
2020/09/13 jQuery
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
python逐行读取文件内容的三种方法
2014/01/20 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
python简单操作excle的方法
2018/09/12 Python
python使用PyQt5的简单方法
2019/02/27 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
七夕情人节促销方案
2014/06/07 职场文书
本科应届生求职信
2014/08/05 职场文书
美术教师求职信范文
2015/03/20 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python