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>




  • 相关阅读:
    jquery tabs插件
    [XPまつり2009LT]コンカツ女子のためのIT技術者の落とし方
    javascriptプログラマのレベル10
    IE中原生的base64支持
    shell脚本超时控制
    杜拉拉老了后
    常见c++笔试题整理(含答案)page26
    程序员编程艺术第二十六章:基于给定的文档生成倒排索引(含源码下载)
    程序员编程艺术第二十五章:Jon Bentley:90%无法正确实现二分查找
    80后富二代砍妻子20多刀,因为女的带佛牌戴的?
  • 原文地址:https://www.cnblogs.com/wzzkaifa/p/6718399.html
Copyright © 2011-2022 走看看