首页 > 其他分享 >HTML5 Api 获取网络地理信息

HTML5 Api 获取网络地理信息

时间:2023-07-29 22:44:14浏览次数:42  
标签:地理信息 const getCurrentPosition 获取 Api HTML5 error GPS

定位(GPS):台式机几乎都没有GPS,笔记本绝大多数都没有GPS,智能手机几乎都有GPS。
获取网络地理信息:navigator.geolocation.getCurrentPosition(successCallback:function(position), errorCallback:function(error));
网络:来粗略的估计地理位置。

总结:https协议,file协议可以获取,http协议下是不能获取的,Goole浏览器的用户需要开梯子。
经度最大值180,纬度最大值90

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p class="zb"></p>
  <script>
    const dom = document.querySelector('.zb');
    // 获取用户坐标
    const getCurrentPosition = () => {
      if (window.navigator.geolocation) { // 判断浏览器是否支持定位
        const successCallback = (position)=> {
          const { coords: { longitude, latitude } } = position;
          dom.innerHTML = `经度${longitude}-纬度${latitude}`;
        }
        const errorCallback = (error)=> {
          console.log("error", error);
        }
        window.navigator.geolocation.getCurrentPosition(successCallback, errorCallback); // 抓取权限 获取经纬度
        return;
      }
      dom.innerHTML = "您的浏览器不支持定位!"
    }
    getCurrentPosition();
  </script>
</body>

</html>

标签:地理信息,const,getCurrentPosition,获取,Api,HTML5,error,GPS
From: https://www.cnblogs.com/bingquan1/p/17590714.html

相关文章

  • 1.6 PC、手机图形API介绍
    电脑的工作原理:电脑是由各种不同的硬件组成,由驱动软件驱使硬件进行工作。所有的软件工程师都会直接或者间接的使用到驱动。定义:是一个图形库,用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口(API)。针对GPU。基础概念 应用端:即我们自己的程序段,相对于opengles,我们属......
  • solidworks api ch05
    打开一个现存的文件,并选择一个表面,执行下列代码:lettestSelectFace(swApp:ISldWorks)=letswModel=swApp.ActiveDoc|>unbox<ModelDoc2>letswSelMgr=swModel.SelectionManager:?>SelectionMgr//Dosomevalidationbeforerunning......
  • Java之Stream流的常用API
    Java之Stream流的常用APIStream流常见中间方法名称说明Stream<T>filter(Predicate<?superT>predicate)用于对流中的数据进行过滤Stream<T>limit(longmaxSize)获取前几个元素Stream<T>skip(longn)跳过前几个元素Stream<T>distinct()去除流中重复......
  • Apifox使用-接口调试
     正文:接口调试前后置操作响应和断言环境和变量 接口调试Apifox除了写接口文档以外,另一个重要的功能就是做接口调试相当于postman。当新建了一个接口文档并保存了以后,文档的后面会出现三个页签:修改文档、运行、高级Mock 在运行这里我们就可以进行接口的调试了,当然......
  • ASP.NET Core WebAPI如何获得远程文件返回文件流给前端?
     一、根据网络路径把文件保存成byte[]返回给前端项目采用的是前后端分离的模式,后端使用ASP.NETCoreWebAPI方式,将文件流返回给前端。///<summary>///根据网络路径把文件保存成byte[]///</summary>///<paramname="filePath"></param>publicbyte[]UrlToByte(string......
  • Web开发者不容错过的10个HTML5工具
    HTML5已经成为当今世界的一个必然组成部分。由于WorldWideWeb万维网是使用超文本标记语言来架构和呈现的,于是HTML5成为了最流行的编程语言之一。随着网络的不断扩张,Web开发人员非常有必要拥有最新的HTML5工具,用于创建动态和交互式的Web应用程序和网页。下面这些就是你不应该错过......
  • asp.net core 2.0 web api基于JWT自定义策略授权
    原文通过登录,来获取Token,再在之后每次请求的Header中追加Authorization为Token的凭据,服务端验证通过即可能获取想要访问的资源。关于JWT的技术,可参考网络上文章,这里不作详细说明,这篇博文,主要说明在asp.netcore2.0中,基于jwt的webapi的权限设置,即在asp.netcore中怎么用JWT,再次......
  • Activiti6系列(5)- 核心API
    前言本来想把《疯狂工作流讲义-activiti6.0》这本书里面的实例拿过来,但是这本书我看完后,认为里面编写的activiti6的核心API代码片段不是很清晰,有不少需要雕琢的地方才好形成一篇博客。所以我就把以前看过的黑马activiti5的案例拿过来放到activiti6.0依赖中运行测试,可以正常使用,说......
  • 一文讲解API网关核心功能——就是nginx,无非加入了安全、流控、转换、版本控制等功能
    一文讲解API网关核心功能【编者的话】本文详细讲解了API网关的基础概念,使用场景和核心功能,以及基于API网关核心引擎做的API全生命周期管理功能扩展等,最好再介绍下当前主流的开源API网关引擎。API网关概述在微服务架构体系里面,我们一般会使用到微服务网关或叫API网关。大家都比较清......
  • Unity3D___微信小游戏常用API总结
    获取用户信息游戏初始化WX.InitSDK((code)=>{//打印屏幕信息varsystemInfo=WX.GetSystemInfoSync();Debug.Log($"{systemInfo.screenWidth}:{systemInfo.screenHeight},{systemInfo.windowWidth}:{systemInfo.windowHeight},......