1

我发现了很多允许地理定位和在地图上显示的插件，但我想要一些不同的东西。

当您进入带有选项“您想要进行地理定位吗？”的页面时，我想进行地理编码。如果用户说是，我想把地址放进去<input type="text" id="xxx">。

有任何想法吗？

4

1 回答 1

2

所以我接受了挑战，我刚刚编写了一个实现。

这是一个有效的 JSFiddle，如下所示：

这是代码：

<html>
    <head>
        <style>
            label
            {
                display: inline-block;
                width: 100px;
            }
        </style>
        <script>
            function get_location()
            {
                navigator.geolocation.getCurrentPosition(geocode, handle_error);
            }

            function geocode(position)
            {
                var latlong = position.coords.latitude + "," + position.coords.longitude;

                if(window.XMLHttpRequest)
                    var request = new XMLHttpRequest();
                else if(window.ActiveXObject)
                    var request = ActiveXObject("Microsoft.XMLHTTP");

                request.open("GET", "http://maps.googleapis.com/maps/api/geocode/json?latlng=" + latlong + "&sensor=true", true);
                request.send();

                request.onreadystatechange = function()
                {
                    if(request.readyState == 4 && request.status == 200)
                    {
                        var address = eval("(" + request.responseText + ")");
                        document.getElementById("address").value = address.results[0].address_components[0].long_name + " " + address.results[0].address_components[1].long_name;
                        document.getElementById("city").value = address.results[0].address_components[6].long_name;
                        document.getElementById("county").value = address.results[0].address_components[2].long_name;
                        document.getElementById("postcode").value = address.results[0].address_components[5].long_name;
                        document.getElementById("country").value = address.results[0].address_components[4].long_name;
                    }
                }
            }

            function handle_error(err)
            {
                switch(err.code)
                {
                    case 1: /* PERMISSION_DENIED */ break;
                    case 2: /* POSITION_UNAVAILABLE */ break;
                    case 3: /* TIMEOUT */ break;
                }
                alert("Error " + err.code);
            }

            window.onload = get_location;
        </script>
    </head>
    <body>
        <label for="address">Street address: </label><input type="text" id="address" name="address"><br>
        <label for="city">City: </label><input type="text" id="city" name="city"><br>
        <label for="county">County: </label><input type="text" id="county" name="county"><br>
        <label for="postcode">Postcode: </label><input type="text" id="postcode" name="postcode"><br>
        <label for="country">Country: </label><input type="text" id="country" name="country">
    </body>
</html>

随时询问您是否需要任何代码澄清！

明天我会写一个更彻底的代码分解和各种参数；该睡了！

于 2013-04-26T06:47:05.830 回答