基于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 相关文章推荐
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
js实现京东轮播图效果
Jun 30 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 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模板类代码
2008/09/07 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
php判断是否为json格式的方法
2014/03/04 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
Jquery插件写法笔记整理
2012/09/06 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
Vue组件化开发思考
2018/02/02 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
python如何把嵌套列表转变成普通列表
2018/03/20 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
小学五年级学生评语
2014/04/22 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
运动会宣传口号
2014/06/09 职场文书
校庆标语集锦
2014/06/25 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
员工升职自荐信
2015/03/27 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL