基于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 相关文章推荐
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
用Node写一条配置环境的指令
Nov 14 Javascript
原生js 实现表单验证功能
Feb 08 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编程中字符串处理的5个技巧小结
2007/11/13 PHP
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
php cli 小技巧
2013/06/03 PHP
PHP引用的调用方法分析
2016/04/25 PHP
php读取本地json文件的实例
2018/03/07 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
Python中进程和线程的区别详解
2017/10/29 Python
Random 在 Python 中的使用方法
2018/08/09 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
在keras中实现查看其训练loss值
2020/06/16 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
《自然之道》教学反思
2014/02/11 职场文书
校园标语大全
2014/06/19 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
先进工作者推荐材料
2014/12/23 职场文书
python通过函数名调用函数的几种方法总结
2021/06/07 Python
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript