zoukankan      html  css  js  c++  java
  • html5 返回当前地理位置的坐标点(经纬度)

    BAIDU

    <!DOCTYPE html>
    <html>
    <body>
    <p id="demo">点击这个按钮。获得您的坐标:</p>
    <button onclick="getLocation()">试一下</button>
    <script>
    var x=document.getElementById("demo");
    function getLocation()
      {
      if (navigator.geolocation)
        {
        navigator.geolocation.getCurrentPosition(showPosition);
        }
      else{x.innerHTML="Geolocation is not supported by this browser.";}
      }
    function showPosition(position)
      {
      x.innerHTML="Latitude: " + position.coords.latitude + 
      "<br />Longitude: " + position.coords.longitude;    
      }
    </script>
    </body>
    </html>

    GOOGLE

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>GIS开发利用html5获取经纬度</title>
    </head>
    
    <body>
    <span id="support">将以下的经纬度输入谷歌地图:</span>
    <div id="show">
    纬度:<span id="latitude"></span><br />
    经度:<span id="longitude"></span><br />
    经纬度准确度:<span id="accuracy"></span><br />
    海拔:<span id="altitude"></span><br />
    海拔高度的准确度:<span id="altitudeAcuracy"></span><br />
    朝向:<span id="heading"></span><br />
    速度:<span id="speed"></span>
    </div>
    <script type="text/javascript">
    var doc = document,
        latitude = doc.getElementById('latitude'),
        longitude = doc.getElementById('longitude'),
        accuracy = doc.getElementById('accuracy'),
        altitude = doc.getElementById('altitude'),
    	altitudeAcuracy = doc.getElementById('altitudeAcuracy'),
    	heading = doc.getElementById('heading'),
    	speed = doc.getElementById('speed'),
    	support = doc.getElementById('support'),
        showDiv = doc.getElementById('show');
    function lodeSupport(){
        if(navigator.geolocation){
            support.innerHTML = '将以下的经纬度输入谷歌地图(纬度 经度)查看自己位置:';
            showDiv.style.display = 'block';
            navigator.geolocation.getCurrentPosition(updataPosition,showError);
        }else{
            support.innerHTML = '对不起,浏览器不支持。';
            showDiv.style.display = 'none';
        }
    }
    function updataPosition(position){
        var latitudeP = position.coords.latitude,
            longitudeP = position.coords.longitude,
            accuracyP = position.coords.accuracy,
    		altitudeP = position.coords.altitude,
    		altitudeAcuracyP = position.coords.altitudeAcuracy,
    		headingP = position.coords.heading,
    		speedP = position.coords.speed;
        latitude.innerHTML = latitudeP;
        longitude.innerHTML = longitudeP;
        accuracy.innerHTML = accuracyP;
    	altitude.innerHTML = altitudeP;
    	altitudeAcuracy.innerHTML = altitudeAcuracyP;
    	heading.innerHTML = headingP;
    	speed.innerHTML = speedP;
    }
    
    function showError(error)
    {
      switch(error.code)
        {
        case error.PERMISSION_DENIED:
          showDiv.innerHTML="用户拒绝訪问地理位置"
          break;
        case error.POSITION_UNAVAILABLE:
          showDiv.innerHTML="地理位置信息无法获取"
          break;
        case error.TIMEOUT:
          showDiv.innerHTML="获取位置时间超时"
          break;
        case error.UNKNOWN_ERROR:
          showDiv.innerHTML="我擦,这是一个未知的错误"
          break;
        }
    }
    
    window.addEventListener('load', lodeSupport , true);
    </script>
    </body>
    </html>



  • 相关阅读:
    VMware Workstation网卡不启动
    解决IE10以下对象不支持“bind”属性或方法
    二分法查找
    选择排序与冒泡排序
    方法内部开启线程的方法
    重写Collections实现自定义排序
    根据反射生成SQL语句
    vue插件安装备忘
    vue cli4.x 新建项目 过程提醒
    php setcooike()失败的原因之一,希望能帮到你
  • 原文地址:https://www.cnblogs.com/wzzkaifa/p/6835013.html
Copyright © 2011-2022 走看看