iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >JavaScript如何定位当前的地理位置
  • 797
分享到

JavaScript如何定位当前的地理位置

2024-04-02 19:04:59 797人浏览 泡泡鱼
摘要

这篇文章将为大家详细讲解有关javascript如何定位当前的地理位置,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下<!DOCTYPE htm

这篇文章将为大家详细讲解有关javascript如何定位当前的地理位置,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

具体内容如下

<!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&amp;ak=A396783ee700cfdb9ba1df281ce36862&amp;services=&amp;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如何定位当前的地理位置”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: JavaScript如何定位当前的地理位置

本文链接: https://www.lsjlt.com/news/78068.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript如何定位当前的地理位置
    这篇文章将为大家详细讲解有关JavaScript如何定位当前的地理位置,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下<!DOCTYPE htm...
    99+
    2024-04-02
  • AngularJs如何利用百度地图API 定位当前位置获取地址信息
    这篇文章主要介绍AngularJs如何利用百度地图API 定位当前位置获取地址信息,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!第一、申请百度密钥  很简单的几步就搞定第二...
    99+
    2024-04-02
  • html5中怎么获取当前定位位置
    今天就跟大家聊聊有关html5中怎么获取当前定位位置,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。代码如下:navigator.geolocatio...
    99+
    2024-04-02
  • 如何使用html5定位获取当前位置并在百度地图上显示
    这篇文章将为大家详细讲解有关如何使用html5定位获取当前位置并在百度地图上显示,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 代码如下: navigator.geo...
    99+
    2024-04-02
  • js实现PC端根据IP定位当前城市地理位置的示例分析
    这篇文章将为大家详细讲解有关js实现PC端根据IP定位当前城市地理位置的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。<script type=&...
    99+
    2024-04-02
  • 在Win8中如何修改当前所在地理位置比如将位置修改为中国
      步骤1:打开“控制面板”;   步骤2:在"时钟、语言和区域"上左键单击;   步骤3:在"更改位置"上左键单击;   步骤4:选择位置标签,在&...
    99+
    2023-06-06
    Win8 地理位置 中国 位置
  • python如何实现获取当前设备的地点位置
    这篇文章主要介绍了python如何实现获取当前设备的地点位置,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、环境介绍Python版本 : Python3.8开发工具 : P...
    99+
    2023-06-29
  • 小程序开发中如何获取当前的地理位置、速度
    这篇文章主要为大家展示了小程序开发中如何获取当前的地理位置、速度,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“小程序开发中如何获取当前的地理位置、速度”这篇文章吧。获取当前的地理位置、速度。当用户...
    99+
    2023-06-26
  • 小程序如何定位当前城市
    本篇内容主要讲解“小程序如何定位当前城市”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“小程序如何定位当前城市”吧!  首先需要申请百度地图Geocoding API  Geocoding API...
    99+
    2023-06-26
  • 如何使用微信小程序显示用户当前地理位置
    今天小编给大家分享一下如何使用微信小程序显示用户当前地理位置的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。wx.getLoc...
    99+
    2023-07-02
  • python实现获取当前设备的地点位置
    目录一、环境介绍1.搜索“高德地图API”,进入官网,注册自己账号2.进入控制台,创建相关应用3.进入web服务API界面二、代码一、环境介绍 Python版...
    99+
    2024-04-02
  • 使用Flutter定位包获取地理位置
    目录Flutter 中获取地理位置先决条件使用 Flutter 定位包设置位置权限获取当前位置使用 Flutter 地理编码包设置获取地址常见的陷阱结论Flutter 中获取地理位置...
    99+
    2024-04-02
  • HTML5如何实现地理定位
    这篇文章主要介绍了HTML5如何实现地理定位,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。地理位置(Geolocation)是 H...
    99+
    2024-04-02
  • HTML5中Geolocation地理位置定位API怎么用
    这篇文章将为大家详细讲解有关HTML5中Geolocation地理位置定位API怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。基本用法 首先,我们可以从浏...
    99+
    2024-04-02
  • 怎么在html5中制作地图当前定位箭头
    今天就跟大家聊聊有关怎么在html5中制作地图当前定位箭头,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。功能点获取当前定位时时显示当前设备方向重点h6每次打开时,只是单纯获取的设备方...
    99+
    2023-06-09
  • JavaScript中怎么获取当前页面的滚动位置
    这期内容当中小编将会给大家带来有关JavaScript中怎么获取当前页面的滚动位置,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。要获取当前页面的滚动条纵坐标位置,用:do...
    99+
    2024-04-02
  • HTML5怎么获取当前地理位置并在百度地图上展示
    这篇文章主要介绍了HTML5怎么获取当前地理位置并在百度地图上展示,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1.HTML5获取当前地理位置HTML5 Geolocatio...
    99+
    2023-06-09
  • 怎么使用Flutter定位包获取地理位置
    本篇内容介绍了“怎么使用Flutter定位包获取地理位置”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Flutter 中获取地理位置如今,发...
    99+
    2023-06-21
  • tracert如何定位故障位置
    Tracert是一个网络诊断工具,用于跟踪网络数据包从源到目的地的路径。通过使用该工具,可以确定数据包经过的所有网络节点,并计算每个...
    99+
    2023-08-25
    tracert
  • VUE中怎么调用高德地图获取当前位置
    这篇文章主要介绍“VUE中怎么调用高德地图获取当前位置”,在日常操作中,相信很多人在VUE中怎么调用高德地图获取当前位置问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”VUE中怎么调用高德地图获取当前位置”的疑...
    99+
    2023-07-06
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作