基于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 对话框和状态栏使用说明
Oct 25 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jQuery实现简单全选框
Sep 13 jQuery
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
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
javascript css styleFloat和cssFloat
2010/03/15 Javascript
jquery中对表单的基本操作代码
2010/07/29 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
介绍Python中的一些高级编程技巧
2015/04/02 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
python Cartopy的基础使用详解
2020/11/01 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
入股协议书范本
2014/04/14 职场文书
意向书范本
2014/07/29 职场文书