基于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 相关文章推荐
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
js调用刷新界面的几种方式
May 03 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 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+dbfile开发小型留言本
2006/10/09 PHP
基于mysql的论坛(4)
2006/10/09 PHP
php基础知识:函数基础知识
2006/12/13 PHP
PHP5 字符串处理函数大全
2010/03/23 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
初识ThinkPHP控制器
2016/04/07 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
jquery json 实例代码
2010/12/02 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
python实现对一个完整url进行分割的方法
2015/04/29 Python
Python yield与实现方法代码分析
2018/02/06 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
软件工程专业推荐信
2013/10/28 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
道歉的话语大全
2015/05/12 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js