基于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 相关文章推荐
Js 本页面传值实现代码
May 17 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 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 flock 文件锁详细介绍
2012/12/29 PHP
js静态方法与实例方法分析
2011/07/04 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
python实现图片批量剪切示例
2014/03/25 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
python变量的存储原理详解
2019/07/10 Python
pymysql 开启调试模式的实现
2019/09/24 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
python图片合成的示例
2020/11/09 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
体育教师自荐信范文
2013/12/16 职场文书
大学生实习证明范本
2014/01/15 职场文书
公司营业员的自我评价
2014/03/04 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
促销活动总结
2014/04/28 职场文书
党支部考察意见范文
2015/06/02 职场文书
孝女彩金观后感
2015/06/10 职场文书
员工规章制度范本
2015/08/07 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL