首页 > 其他分享 >html5 geolocation 地理定位

html5 geolocation 地理定位

时间:2022-08-24 14:33:22浏览次数:66  
标签:function geolocation 定位 html5 getGeolocation position navigator

html5 获取经纬度,前提用户开启可获取权限

 

展示代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #div1 {width:auto;height:70px;padding:10px;border:1px solid #aaaaaa;}

  </style>
  <script>
    var x;
    function getGeolocation(){
      if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(showPosition);
      }
    }
    function showPosition(position){
        x.innerHTML="纬度: " + position.coords.latitude + 
        "<br>经度: " + position.coords.longitude;    
    }

    window.onload = function () {
      x=document.getElementById("div1");
      getGeolocation();
    }
    
  </script>
    
</head>
<body>

  <div id="div1"></div>
  
</body>

</html>

  

 

标签:function,geolocation,定位,html5,getGeolocation,position,navigator
From: https://www.cnblogs.com/bky-1/p/16619783.html

相关文章

  • testNG中拖拽元素到指定位置
    为了改变元素在页面中的位置,需要拖拽元素到指定位置记录一下1、先定位到要拖拽的元素Actionsaction=newActions(driver);WebElement el=driver.findElement(By......
  • 标准IO-定位流
    ftell-fseek-rewindftell-fseekofgetpos-fsetpos......
  • websockets html5 全双工通信
    常见传输协议 不够全面会陆续补充协议链接面向默认端口备注HTTPTCP链接网页80超文本传输协议FTPTCP链接文件21文件传输协议WebSocketsTCP链......
  • vue 滑动到指定位置
    在Vue中,有三种方式可以实现H5页面滑动至指定位置方法1://先获取目标位置距离mounted(){this.$nextTick(()=>{setTimeout(()=>{lettargetbox=......
  • 定位
     定位=定位模式+边位移定位模式值语义static静态定位relative相对定位absolute绝对定位fixed固定定位边位移属性示例语义toptop......
  • 自动化测试工具selenium的常用定位方法
    定位方法不仅限于这些,有其他补充或建议,大家可以在评论区一起讨论哦!!! 【打开链接】drive.get(“https://www.baidu.com”) 【用id定位】drive.find_element_by_id(“kw......
  • copy依赖资源到指定位置
    #usingSystem.IO;usingUnityEditor;usingUnityEngine;namespacexui.Editor{publicclassResDeps{[MenuItem("Assets/myTool/打印依赖",......
  • js定位元素
    定位到被测的标签       全局查找div标签下的元素document.querySelectorAll('li') 鼠标移动找到联动到的标签位置  document.querySelectorAl......
  • 第十章 对象的示例化内存布局与访问定位
    遍地都是月光,可月亮只有一个1.对象的实例化创建对象的方式new:最常见的方式、单例类中调用getInstance的静态方法、XXXFactory的静态方法。Class的newInstance方......
  • Day11-HTML5
    H5新增标签:H5新增的语义化标签:(双标记) 1.header整个页面的头部 2.main主要部分ie不兼容 3.section页面中的一个区块 4.footer结尾区 5.nav导航链接 6.art......