Question

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

更新

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

Answer 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/

Answer 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。根据您的需要进行相应修改。

Answer 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来计算距离。

Answer 4

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

HTML5地理定位实施

4 个答案: