使用地理位置在div中显示城市名称

时间:2013-09-12 11:20:21

标签: javascript jquery html geolocation reverse-geocoding

好的,所以我碰到了一堵墙,我想要做的就是传播一个带有手头用户城市名称的div,我想我是在正确的路线但却遗漏了一些东西。有人可以帮忙吗?继承我的编码:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Reverse Geocoding</title> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
function getLocation(){
    var loc = document.getElementById('coords');
    if (navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
    else
    {
        loc.value = "nolocation";
    }
}

function showPosition(position){
    var loc = document.getElementById('coords');
    loc.value = position.coords.latitude + "," + position.coords.longitude;

    var geocoder = new google.maps.Geocoder();
     var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {


                var area = getArea(results)
                document.getElementById('location-box').value = area;
            }
        }
    });
}

function getCountry(results)
{
    for (var i = 0; i < results[0].address_components.length; i++)
    {
        var shortname = results[0].address_components[i].short_name;
        var longname = results[0].address_components[i].long_name;
        var type = results[0].address_components[i].types;
        if (type.indexOf("country") != -1)
        {
            if (!isNullOrWhitespace(longname))
            {
                return longname;
            }
            else
            {
                return shortname;
            }
        }
    }
    return "";
}

function getArea(results)
{
    var areaName = "";
    for (var i = 0; i < results[0].address_components.length; i++)
    {
        var shortname = results[0].address_components[i].short_name;
        var longname = results[0].address_components[i].long_name;
        var type = results[0].address_components[i].types;

        if (type.indexOf("locality") != -1){
            if (!isNullOrWhitespace(shortname))
            {
                areaName += shortname;
            }
            else
            {
                areaName += longname;
            }
        }
        if (type.indexOf("administrative_area_level_2") != -1){
            if (areaName != "")
            {
                areaName += ", ";
            }
            if (!isNullOrWhitespace(shortname))
            {
                areaName += shortname;
            }
            else
            {
                areaName += longname;
            }
        }
    }
    return areaName;
}

function isNullOrWhitespace(text) {
    if (text == null) {
        return true;
    }
    return text.replace(/\s/gi, '').length < 1;
}
</script> 
</head> 
<body onload="getLocation()"> 
<div id="coords"></div>
<div id="location-box"></div>
</body> 
</html> 

最后,如果可能初始化搜索,我希望这些数据显示在输入框中。

1 个答案:

答案 0 :(得分:6)

这是我用来反转地理编码我的位置以确定我的状态的解决方案。我希望这有帮助。

navigator.geolocation.getCurrentPosition(function (pos) {
    var geocoder = new google.maps.Geocoder();
    var lat = pos.coords.latitude;
    var lng = pos.coords.longitude;
    var latlng = new google.maps.LatLng(lat, lng);

    //reverse geocode the coordinates, returning location information.
    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
        var result = results[0];
        var state = '';

        for (var i = 0, len = result.address_components.length; i < len; i++) {
            var ac = result.address_components[i];

            if (ac.types.indexOf('administrative_area_level_1') >= 0) {
                state = ac.short_name;
            }
        }

        $('#yourInputBox').val(state);

    });
});