基于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 checkbox复选框全选功能简单实例
Oct 09 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
js实现汉字排序的方法
Jul 23 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
k8s node节点重新加入master集群的实现
Feb 22 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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 转义使用详解
2013/07/15 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
javascript 简练的几个函数
2009/08/29 Javascript
表格 隔行换色升级版
2009/11/07 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
js实现简单模态框实例
2018/11/16 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
Python交换变量
2008/09/06 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
python多线程并发实例及其优化
2019/06/27 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
毕业生动漫设计求职信
2013/10/11 职场文书
办公文员的工作岗位职责
2013/11/12 职场文书
播音主持女孩的自我评价分享
2013/11/20 职场文书
小学生教师节广播稿
2015/08/19 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python