基于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 相关文章推荐
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
微信公众号平台接口开发 获取access_token过程解析
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 面向对象 final类与final方法
2010/05/05 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
PHP children()函数讲解
2019/02/03 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
JS画线(实例代码)
2013/11/20 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
Python获取网页上图片下载地址的方法
2015/03/11 Python
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
python实现远程控制电脑
2019/05/23 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
解决Python使用列表副本的问题
2019/12/19 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
优质的学校老师推荐信
2013/10/28 职场文书
遗体告别仪式答谢词
2014/01/23 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
2015年幼师工作总结
2015/04/28 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
幼儿园六一主持词
2015/06/30 职场文书
个人向公司借款协议书
2016/03/19 职场文书
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js