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>



  • 相关阅读:
    [USACO15FEB][AC自动机][栈] Censoring G
    [USACO06NOV] Round Numbers S
    Emiya家的饭
    dp
    P2498 [SDOI2012]拯救小云公主
    [HEOI2015]小L的白日梦
    SP8064 AMR10J-Mixing Chemicals
    10.24三题
    P4296 [AHOI2007]密码箱
    CF780F
  • 原文地址:https://www.cnblogs.com/yxysuanfa/p/6909551.html
Copyright © 2011-2022 走看看