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>




  • 相关阅读:
    使用discourse 作为社区工具
    dremio schema 更新的问题
    go-mysql-server 新版本发布
    开发一个dremio user_agent 解析函数
    java 几个不错的user_agent 解析工具包
    Docker Swarm 高可用详解
    用Docker Swarm实现容器服务高可用
    Docker 1.12 :认识 Swarm 模式下的节点崩溃处理
    Linux下磁盘分区调整(在不使用LVM的情况下)
    docker-swarm----多机容器管理
  • 原文地址:https://www.cnblogs.com/wzzkaifa/p/6718399.html
Copyright © 2011-2022 走看看