HTML5 地理位置实现答案

【问题标题】：HTML5 Geolocation implementationHTML5 地理位置实现
【发布时间】：2011-06-21 22:58:15
【问题描述】：

我有一个区域和纬度/经度列表，我要求用户在访问我的网站时选择他们的位置。如果可能的话，我希望使用 HTML5 的地理位置预填充他们的位置，但我不确定最好的方法。网络上似乎缺少教程，至少从我能找到的内容来看。有人做过吗？你知道好的教程/资源吗？

更新

如果我有一堆城市的坐标，我如何使用 javascript 来确定最近的位置？

【问题讨论】：

W3C Geolocation API 不是 HTML5 规范的一部分，fwiw。（见：isgeolocationpartofhtml5.com）
嗯，这可以简单地通过计算坐标之间的距离来完成。使用公式square_root((x1^2 - x2^2) + (y1^2 - y2^2)) 其中两个坐标分别是(x1,y1) 和(x2,y2)

标签： jquery html geolocation

【解决方案1】：

试试这个例子：

window.onload = function(){
    if(navigator.geolocation)
        navigator.geolocation.getCurrentPosition(handleGetCurrentPosition, onError);
}

function handleGetCurrentPosition(location){

    location.coords.latitude;
    location.coords.longitude;
}
function onError(){...}

点击此处查看更大的演示。 http://od-eon.com/labs/geolocation/

【讨论】：

【解决方案2】：

function load_position() 
{
    if (navigator.geolocation) 
        {
            navigator.geolocation.getCurrentPosition(showPosition);
        } 
    else 
        { 
            l.innerHTML = "Geolocation is not supported by this browser.";
        }
}
function showPosition(position) 
    {
        l.innerHTML = "Longitude" +  position.coords.latitude + " Longitude " + position.coords.longitude + "</td></tr>" ;  
    }

当您想使用坐标时，只需调用 load_position() 即可。

注意：l 是要放置数据的元素的 ID。相应地修改它以满足您的需要。

【讨论】：

为什么没有明确说明，位置对象作为参数传递给 showPosition 方法？

【解决方案3】：

要从列表中获取你的位置和离你最近的城市，你可以试试这个：

<!DOCTYPE html>
<html>
<head>
    <title>findClosest</title>
</head>
<body>
    <button id='find-btn'>Find closest city</button>
    <br />
    <div id='out'></div>
    <select id='cities'>
        <option selected></option>
        <option value='35.6,139.6'>Tokyo</option>
        <option value='52.5,13.3'>Berlin</option>
        <option value='-33.8,151.2'>Sydney</option>
        <option value='40.2,-47'>New York City</option>
    </select>
    <script>
        var cities = document.getElementById('cities').children;
        // convert to radians
        function deg2rad(val) {
            return val * Math.PI / 180.0;
        }
        // compute distance in kilometers: https://stackoverflow.com/a/365853/6608706
        function distance(lat1, lon1, lat2, lon2) {
            var earthRadiusKm = 6371, //km
                dLat = deg2rad(lat2 - lat1),
                dLon = deg2rad(lon2 - lon1);
            lat1 = deg2rad(lat1);
            lat2 = deg2rad(lat2);
            var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2);
            var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            return earthRadiusKm * c; //km
        }
        // gets index of closest city
        function findClosest(lat, lon) {
            var idx = 1,
                dist = 50000,
                tdist,
                latlon, i;
            for (i = 1; i < cities.length; i++) {
                latlon = cities[i].value.split(',')
                tdist = distance(lat, lon, +latlon[0], +latlon[1]);
                if (tdist < dist) {
                    dist = tdist;
                    idx = i;
                }
            }
            return idx;
        }
        // find our position
        function findMe() {
            var out = document.getElementById('out');
            if (!navigator.geolocation) {
                out.innerHTML = '<p>Geolocation is not supported by your browser</p>';
                return;
            }

            function success(position) {
                var c = position.coords;
                var keys = Object.keys(position);
                var idx = findClosest(c.longitude, c.latitude);
                out.innerHTML = '<p>You are at longitude=' + c.longitude + ', latitude=' + c.latitude +
                    '<br/><br/>You are closest to: </p>';
                cities[0].selected = false;
                cities[idx].selected = true;
            }

            function error() {
                out.innerHTML = 'Unable to retrieve your location';
            }
            out.innerHTML = '<p>Locating…</p>';
            navigator.geolocation.getCurrentPosition(success, error);
        }

        document.getElementById('find-btn').addEventListener('click', findMe);
    </script>
</body>
</html>

JSfiddle link is here。感谢 cletus 计算距离。

【讨论】：

【解决方案4】：

Nettuts 有这个很棒的教程，这里是链接http://mobile.tutsplus.com/tutorials/mobile-web-apps/html5-geolocation/

【讨论】：