那些遇到过的问题

使用地理位置获取城市名称

lis*_*aro 133 html javascript geolocation

我设法使用html5地理位置获取用户的经度和纬度. 

//Check if browser supports W3C Geolocation API
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
} 
//Get latitude and longitude;
function successFunction(position) {
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
}
Run Code Online (Sandbox Code Playgroud)

我想显示城市名称,似乎获得它的唯一方法是使用反向地理定位api.我阅读谷歌的反向地理定位文档,但我不知道如何在我的网站上获得输出.

我不知道如何使用它:"http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&sensor=true"在页面上显示城市名称.

什么是标准方法呢？

Mic*_*hal 197

您可以使用Google API执行此类操作.

请注意,您必须包含谷歌地图库才能实现此目的.Google地理编码器会返回大量地址组件,因此您必须对哪个城市拥有该城市做出有根据的猜测.

"administrative_area_level_1"通常是您正在寻找的,但有时候地方就是您所追求的城市.

无论如何 - 谷歌响应类型的更多细节可以在这里和这里找到.

下面是应该做的诀窍代码:

<!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"> 
  var geocoder;

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
} 
//Get the latitude and the longitude;
function successFunction(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    codeLatLng(lat, lng)
}

function errorFunction(){
    alert("Geocoder failed");
}

  function initialize() {
    geocoder = new google.maps.Geocoder();



  }

  function codeLatLng(lat, lng) {

    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
      console.log(results)
        if (results[1]) {
         //formatted address
         alert(results[0].formatted_address)
        //find country name
             for (var i=0; i<results[0].address_components.length; i++) {
            for (var b=0;b<results[0].address_components[i].types.length;b++) {

            //there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
                if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
                    //this is the object you are looking for
                    city= results[0].address_components[i];
                    break;
                }
            }
        }
        //city data
        alert(city.short_name + " " + city.long_name)


        } else {
          alert("No results found");
        }
      } else {
        alert("Geocoder failed due to: " + status);
      }
    });
  }
</script> 
</head> 
<body onload="initialize()"> 

</body> 
</html>
Run Code Online (Sandbox Code Playgroud)

  • 对于V3,{'latlng':latlng}字符串应更改为'location',如... geocode({'location':latlng}).这个例子让我几乎到了那里,但'latlng'字符串似乎不再适用于较新的apis.有关详细信息,请参阅:https://developers.google.com/maps/documentation/javascript/reference#GeocoderRequest. (5认同)
  • 对于管理区域级别1,情况并非如此,有时城市名称不存在. - {"long_name"=>"旧金山","类型"=> ["administrative_area_level_2","政治"],"short_name"=>"旧金山"},{"long_name"=>"加利福尼亚","类型"=> ["administrative_area_level_1","political"],"short_name"=>"CA"},{"long_name"=>"美国","类型"=> ["国家/地区","政治"]," SHORT_NAME "=>" US"} (3认同)

Ben*_*ing 53

另一种方法是使用我的服务http://ipinfo.io,它根据用户的当前IP地址返回城市,地区和国家/地区名称.这是一个简单的例子:

$.get("http://ipinfo.io", function(response) {
    console.log(response.city, response.country);
}, "jsonp");
Run Code Online (Sandbox Code Playgroud)

这是一个更详细的JSFiddle示例,它还打印出完整的响应信息,因此您可以看到所有可用的详细信息:http://jsfiddle.net/zK5FN/2/

  • 虽然不那么准确. (20认同)
  • 无法从俄罗斯大型供应商的知识产权中发现城市甚至是城市:( (4认同)
  • 大声笑...这给我的内部网络IP(192.168 ...) (2认同)

Kur*_*den 45

使用html5地理定位需要用户权限.如果您不想这样做,请使用https://geoip-db.com等外部定位器支持IPv6.不允许任何限制和无限制请求.

例:

$.ajax({
  url: "https://geolocation-db.com/jsonp",
  jsonpCallback: "callback",
  dataType: "jsonp",
  success: function(location) {
    $('#country').html(location.country_name);
    $('#state').html(location.state);
    $('#city').html(location.city);
    $('#latitude').html(location.latitude);
    $('#longitude').html(location.longitude);
    $('#ip').html(location.IPv4);
  }
});
Run Code Online (Sandbox Code Playgroud)

对于纯javascript示例,不使用jQuery,请查看此答案.

Mik*_*ail 16

您可以使用Google Maps Geocoding API获取城市,国家/地区,街道名称和其他地理位置的名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>
    <script type="text/javascript">
        navigator.geolocation.getCurrentPosition(success, error);

        function success(position) {
            console.log(position.coords.latitude)
            console.log(position.coords.longitude)

            var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en';

            $.getJSON(GEOCODING).done(function(location) {
                console.log(location)
            })

        }

        function error(err) {
            console.log(err)
        }
    </script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

并使用jQuery在页面上显示此数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>

    <p>Country: <span id="country"></span></p>
    <p>State: <span id="state"></span></p>
    <p>City: <span id="city"></span></p>
    <p>Address: <span id="address"></span></p>

    <p>Latitude: <span id="latitude"></span></p>
    <p>Longitude: <span id="longitude"></span></p>

    <script type="text/javascript">
        navigator.geolocation.getCurrentPosition(success, error);

        function success(position) {

            var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en';

            $.getJSON(GEOCODING).done(function(location) {
                $('#country').html(location.results[0].address_components[5].long_name);
                $('#state').html(location.results[0].address_components[4].long_name);
                $('#city').html(location.results[0].address_components[2].long_name);
                $('#address').html(location.results[0].formatted_address);
                $('#latitude').html(position.coords.latitude);
                $('#longitude').html(position.coords.longitude);
            })

        }

        function error(err) {
            console.log(err)
        }
    </script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

Pra*_*eep 15

这是我的更新工作版本,它将获得城市/城镇,看起来在json响应中修改了一些字段.参考此问题的先前答案.(感谢Michal和另外一个参考:链接 

var geocoder;

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
// Get the latitude and the longitude;
function successFunction(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  codeLatLng(lat, lng);
}

function errorFunction() {
  alert("Geocoder failed");
}

function initialize() {
  geocoder = new google.maps.Geocoder();

}

function codeLatLng(lat, lng) {
  var latlng = new google.maps.LatLng(lat, lng);
  geocoder.geocode({latLng: latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[1]) {
        var arrAddress = results;
        console.log(results);
        $.each(arrAddress, function(i, address_component) {
          if (address_component.types[0] == "locality") {
            console.log("City: " + address_component.address_components[0].long_name);
            itemLocality = address_component.address_components[0].long_name;
          }
        });
      } else {
        alert("No results found");
      }
    } else {
      alert("Geocoder failed due to: " + status);
    }
  });
}
Run Code Online (Sandbox Code Playgroud)

Onu*_*rım 10

geolocator.js可以做到这一点.(我是作者).

获取城市名称(有限地址)

geolocator.locateByIP(options, function (err, location) {
    console.log(location.address.city);
});
Run Code Online (Sandbox Code Playgroud)

获取完整的地址信息

下面的示例将首先尝试使用HTML5 Geolocation API来获取精确坐标.如果失败或被拒绝,它将回退到Geo-IP查找.一旦获得坐标,它就会将坐标反向地理编码为地址.

var options = {
    enableHighAccuracy: true,
    fallbackToIP: true, // fallback to IP if Geolocation fails or rejected
    addressLookup: true
};
geolocator.locate(options, function (err, location) {
    console.log(location.address.city);
});
Run Code Online (Sandbox Code Playgroud)

这在内部使用Google API(用于地址查找).因此,在此调用之前,您应该使用Google API密钥配置geolocator.

geolocator.config({
    language: "en",
    google: {
        version: "3",
        key: "YOUR-GOOGLE-API-KEY"
    }
});
Run Code Online (Sandbox Code Playgroud)

Geolocator支持地理位置(通过HTML5或IP查找),地理编码,地址查找(反向地理编码),距离和持续时间,时区信息以及更多功能......

Jaf*_*afo 6

经过一些搜索和拼接几个不同的解决方案以及我自己的东西,我想出了这个功能:

function parse_place(place)
{
    var location = [];

    for (var ac = 0; ac < place.address_components.length; ac++)
    {
        var component = place.address_components[ac];

        switch(component.types[0])
        {
            case 'locality':
                location['city'] = component.long_name;
                break;
            case 'administrative_area_level_1':
                location['state'] = component.long_name;
                break;
            case 'country':
                location['country'] = component.long_name;
                break;
        }
    };

    return location;
}
Run Code Online (Sandbox Code Playgroud)

Vin*_*mar 5

您可以使用https://ip-api.io/获取城市名称。它支持 IPv6。

作为奖励，它允许检查 IP 地址是否是 Tor 节点、公共代理或垃圾邮件发送者。

JavaScript 代码：

$(document).ready(function () {
        $('#btnGetIpDetail').click(function () {
            if ($('#txtIP').val() == '') {
                alert('IP address is reqired');
                return false;
            }
            $.getJSON("http://ip-api.io/json/" + $('#txtIP').val(),
                 function (result) {
                     alert('City Name: ' + result.city)
                     console.log(result);
                 });
        });
    });
Run Code Online (Sandbox Code Playgroud)

HTML 代码

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div>
    <input type="text" id="txtIP" />
    <button id="btnGetIpDetail">Get Location of IP</button>
</div>
Run Code Online (Sandbox Code Playgroud)

JSON 输出

{
    "ip": "64.30.228.118",
    "country_code": "US",
    "country_name": "United States",
    "region_code": "FL",
    "region_name": "Florida",
    "city": "Fort Lauderdale",
    "zip_code": "33309",
    "time_zone": "America/New_York",
    "latitude": 26.1882,
    "longitude": -80.1711,
    "metro_code": 528,
    "suspicious_factors": {
        "is_proxy": false,
        "is_tor_node": false,
        "is_spam": false,
        "is_suspicious": false
    }
}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

273105 次

最近记录：

6 年，2 月 前
从IP地址获取位置 192
从IP地址获取位置 192
从地理编码器结果中获取城市？ 43
更多相关链接
相关归档
如何垂直对齐div中的元素？ 722
从大的HTML字符串创建jQuery对象 133
如何防止"play()请求被暂停()调用中断"错误？ 102
使用Node.js构建网站的最佳实践 79
在javascript中将对象数组复制到另一个数组中 52
变量作为JavaScript对象文字中的属性名称？ 46
如何评估jQuery选择器$('#foo a')？ 44
在Jade文件中连接变量+字符串 31
如果选中,如何禁用/启用带复选框的按钮 22
PHP从ip范围生成IP列表 0
难疑归档
一次捕获多个异常？ 2015
如何在Linux中一步更改文件夹及其所有子文件夹和文件的权限？ 1711
当键盘出现时 - 如何开始编辑时,如何让UITextField向上移动？ 1674
如何删除GitHub上的提交？ 1619
JavaScript发布请求,如表单提交 1465
从JSON文件中解析值？ 1400
在Python中反转一个字符串 1288
如何查看仅一个用户提交的git日志？ 1178
如何加入(合并)数据框(内部,外部,左侧,右侧)？ 1155
错误消息"未找到与约束合同名称匹配的导出" 1057