基于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滚动图片具体实现
Nov 18 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
javascript类型转换使用方法
Feb 08 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
详解Angular Karma测试的持续集成实践
Nov 15 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
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
python aiohttp的使用详解
2019/06/20 Python
Python logging设置和logger解析
2019/08/28 Python
python如何获取apk的packagename和activity
2020/01/10 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
中国梦演讲稿3分钟
2014/08/19 职场文书
小升初自荐信范文
2015/03/05 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
中秋节随笔
2015/08/15 职场文书
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL