使用JS获取当前地理位置的2种方法举例

 更新时间:2023年11月08日 10:09:35   作者:喬~~  
这篇文章主要给大家介绍了关于使用JS获取当前地理位置的2种方法,获取当前位置在实际场景中非常有用,比如定位用户的位置,为其推荐周边的商家和服务等,需要的朋友可以参考下

HTML5 Geolocation API

HTML5 Geolocation API是W3C定制的用于获取用户地理位置信息的标准API,它可以使用纯JavaScript来获取用户的GPS坐标信息,这是一种免费的获取位置的方法。

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}
function showPosition(position) {
  var lat = position.coords.latitude;
  var long = position.coords.longitude;
  alert("Latitude: " + lat + "<br>Longitude: " + long);
}

IP定位API

如果HTML5 Geolocation API无法满足需求,可以使用IP定位API来获取用户的位置信息。它可以根据用户IP地址获取其地理位置,但这种方式在定位精度方面存在一定的局限性。

function getLocation() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = JSON.parse(xhttp.responseText);
      var lat = response.lat;
      var long = response.lon;
      alert("Latitude: " + lat + "<br>Longitude: " + long);
    }
  };
  xhttp.open("GET", "https://ipapi.co/json/", true);
  xhttp.send();
}

以上是两种获取当前地理位置的方法,你可以根据实际情况选择其中一种或者结合使用。如果需要更精确的位置信息,可以尝试使用GPS设备或者其他辅助定位设备。

附:javascript 获取当前所在城市定位

在 JavaScript 中获取当前所在城市定位,可以使用浏览器的地理定位功能。

首先,需要检查浏览器是否支持地理定位功能,可以使用 navigator.geolocation 对象来进行检查。如果浏览器不支持地理定位功能,则可以使用其他方法(例如通过 IP 地址获取定位信息)来获取用户的地理位置。

如果浏览器支持地理定位功能,则可以使用 navigator.geolocation.getCurrentPosition 方法来获取用户的地理位置。该方法接受两个参数:一个回调函数和一个错误回调函数。回调函数会接收一个参数,即当前的地理位置信息,包括纬度、经度和海拔信息。

例如:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log(position.coords.latitude);
    console.log(position.coords.longitude);
  }, function(error) {
    console.log(error.message);
  });
} else {
  console.log("浏览器不支持地理定位功能");
}

上面的代码会尝试获取用户的地理位置信息,如果成功,则会在控制台输出纬度和经度信息,如果失败,则会在控制台输出错误信息。

注意:获取地理位

总结

到此这篇关于使用JS获取当前地理位置的2种方法的文章就介绍到这了,更多相关JS获取当前地理位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • ie8本地图片上传预览示例代码

    ie8本地图片上传预览示例代码

    ie8本地图片上传预览出现问题是因为限制浏览器造访本地文件,所以用到滤镜和div,下面有个不错的示例,希望对大家有所帮助
    2014-01-01
  • 兼容各大浏览器的JavaScript阻止事件冒泡代码

    兼容各大浏览器的JavaScript阻止事件冒泡代码

    本文给大家分享的是一段兼容各大浏览器的JavaScript阻止事件冒泡代码,虽然因为时间问题没有深入研究,但是还是相当不错的,这里推荐给大家
    2015-07-07
  • 原生JS实现旋转轮播图+文字内容切换效果【附源码】

    原生JS实现旋转轮播图+文字内容切换效果【附源码】

    这篇文章主要介绍了原生JS实现旋转轮播图+文字内容切换效果,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • JavaScript滚动条属性scrollTop和scrollHeight

    JavaScript滚动条属性scrollTop和scrollHeight

    在开发中我们常常会用到判断滚动条是否触底的逻辑,我一般都会在网上搜一段代码,这段代码有用到scrollTop、clientHeight、 scrollHeight,这篇文章主要给大家介绍了关于JavaScript滚动条属性scrollTop和scrollHeight的相关资料,需要的朋友可以参考下
    2023-11-11
  • vue3 uniapp微信登录功能实现

    vue3 uniapp微信登录功能实现

    根据最新的微信小程序官方的规定,uniapp中的uni.getUserInfo方法不再返回用户头像和昵称、以及手机号,这篇文章主要介绍了vue3 uniapp微信登录功能实现,需要的朋友可以参考下
    2024-04-04
  • URLSearchParams快速解析URL查询参数实现

    URLSearchParams快速解析URL查询参数实现

    这篇文章主要为大家介绍了URLSearchParams快速解析URL查询参数实现,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • js中递归函数的使用介绍

    js中递归函数的使用介绍

    所谓的递归函数就是在函数体内调用本函数。使用递归函数一定要注意,处理不当就会进入死循环。递归函数只有在特定的情况下使用 ,比如阶乘问题
    2012-10-10
  • JS实现随机点名系统

    JS实现随机点名系统

    这篇文章主要为大家详细介绍了JS实现随机点名系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • ES6中Array.find()和findIndex()函数的用法详解

    ES6中Array.find()和findIndex()函数的用法详解

    ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
    2017-09-09
  • flash javascript之间的通讯方法小结

    flash javascript之间的通讯方法小结

    不用getURL和fsCommand方法个国外的通信方法,值得一看
    2008-12-12

最新评论