基于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学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
微信小程序用户授权最佳实践指南
May 08 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
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
5 cool javascript apps
2007/03/24 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
python简单猜数游戏实例
2015/07/09 Python
详解Python验证码识别
2016/01/25 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
Python如何给你的程序做性能测试
2020/07/29 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
化工操作工岗位职责
2014/04/29 职场文书
班子四风对照检查材料
2014/08/21 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
个人原因辞职信模板
2015/05/13 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
格林童话读书笔记
2015/06/30 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL