基于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 相关文章推荐
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
js实现汉字排序的方法
Jul 23 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
angular多语言配置详解
May 16 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 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
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
使用PHP Socket写的POP3类
2013/10/30 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
讲解Python中if语句的嵌套用法
2015/05/14 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
Django web框架使用url path name详解
2019/04/29 Python
python装饰器使用实例详解
2019/12/14 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
小学数学国培感言
2014/03/10 职场文书
三年级小学生评语
2014/04/22 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
Python实现归一化算法详情
2022/03/18 Python