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

【问题标题】：Displaying City name in a div using geolocation使用地理位置在 div 中显示城市名称
【发布时间】：2013-09-16 18:06:55
【问题描述】：

好的，所以我碰壁了，我只想用手头用户的城市名称传播一个 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>

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

【问题讨论】：

标签： javascript jquery html geolocation reverse-geocoding

【解决方案1】：

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

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);

    });
});

【讨论】：