基于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 相关文章推荐
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
jQuery实现当按下回车键时绑定点击事件
Jan 28 Javascript
javascript的数组和常用函数详解
May 09 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
Angular 多模块项目构建过程
Feb 13 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函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
python getopt详解及简单实例
2016/12/30 Python
Python的语言类型(详解)
2017/06/24 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
我的网上商城创业计划书
2013/12/26 职场文书
毕业生自荐书
2014/02/02 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL