zoukankan      html  css  js  c++  java
  • html5 geolocation地理位置

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>html5 geolocation</title>
    <link href="css/html5.css" rel="stylesheet" type="text/css">
    </head>

    <body>
    <span id="support">请将下面的经纬度输入谷歌地图:</span>
    <div id="show">
    纬度:<span id="latitude"></span><br />
    经度:<span id="longitude"></span><br />
    准确度:<span id="accuracy"></span>
    </div>
    <script type="text/javascript">
    var doc = document,
    latitude
    = doc.getElementById('latitude'),
    longitude
    = doc.getElementById('longitude'),
    accuracy
    = doc.getElementById('accuracy'),
    support
    = doc.getElementById('support'),
    showDiv
    = doc.getElementById('show');
    function lodeSupport(){
    if(navigator.geolocation){
    support.innerHTML
    = '同意共享地址,然后将下面的经纬度输入谷歌地图(纬度 经度)查看自己位置:';
    showDiv.style.display
    = 'block';
    navigator.geolocation.getCurrentPosition(updataPosition);
    }
    else{
    support.innerHTML
    = '垃圾浏览器不支持,赶快换吧!';
    showDiv.style.display
    = 'none';
    }
    }
    function updataPosition(position){
    var latitudeP = position.coords.latitude,
    longitudeP
    = position.coords.longitude,
    accuracyP
    = position.coords.accuracy;
    latitude.innerHTML
    = latitudeP;
    longitude.innerHTML
    = longitudeP;
    accuracy.innerHTML
    = accuracyP;
    }
    window.addEventListener(
    'load', lodeSupport , true);
    </script>
    </body>
    </html>

    geolocation是window.navigator新增的一个属性,它有<strong>3个方法</strong>:
    1.getCurrentPosition(successF, errorF, options)--一次性获取当前地理位置;
    2.watchCurrentPosition(successF, errorF, options)--持续获取;
    3.clearWatch(watchID)--清除持续获取,类似清楚clearInterval;

    上边的例子用到了第一个方法,第一个方法和第二个方法参数是一样的,下面说下<strong>3个参数</strong>:
    (1)successF(position)--此参数为3个参数中唯一一个必选的
    获取位置成功后返回的方法。这个方法传入一个位置对象(position),我们所需要的经纬度、准确度都是通过这个对象的coords坐标属性取得的(除了时间戳timestamp直接由position获取,其他一些属性如海拔等都有position.coords获取)。

    (2)errorF(error)
    获取位置失败执行的方法。该方法传入一个错误对象(error),通过error.code的可得知是什么错误(code值为1是用户拒绝共享位置;2是获取不到位置;3是超时错误;0表示不属于前3种情况的错误);通过error.message获取具体信息。

    (3)options
    以josn对象格式传入高精度、超时时间、缓存时间参数{timeout:3000, maximumAge:60*1000*2}
    上面的例子值传入了第一个参数。

    附加通过经纬度求2地距离方法

    Number.prototype.toRadians = function() {
    return this * Math.PI / 180;
    }
    function distance(latitude1, longitude1, latitude2, longitude2) {
    // R is the radius of the earth in kilometers
    var R = 6371;

    var deltaLatitude = (latitude2-latitude1).toRadians();
    var deltaLongitude = (longitude2-longitude1).toRadians();
    latitude1 = latitude1.toRadians(), latitude2 = latitude2.toRadians();

    var a = Math.sin(deltaLatitude/2) *
    Math.sin(deltaLatitude/2) +
    Math.cos(latitude1) *
    Math.cos(latitude2) *
    Math.sin(deltaLongitude/2) *
    Math.sin(deltaLongitude/2);

    var c = 2 * Math.atan2(Math.sqrt(a),
    Math.sqrt(1-a));
    var d = R * c;
    return d;
    }
  • 相关阅读:
    显示器接口
    常用英语-持续更新
    Web Service
    单元测试--Moq
    单元测试--Xunit
    Asp.Net WebApi 跨域问题
    VS中常用的快捷键
    单元测试--最佳实践
    设计模式--建造者模式
    windows10搭建GitBucket服务器(1)
  • 原文地址:https://www.cnblogs.com/bianyuan/p/2356460.html
Copyright © 2011-2022 走看看