使用地理位置获取城市名称[重复]

Posted 2023-02-23

技术标签:

【中文标题】使用地理位置获取城市名称[重复]【英文标题】：Get city name using geolocation [duplicate] 【发布时间】：2011-07-23 01:00:58 【问题描述】：

我设法使用基于 html 的地理定位来获取用户的纬度和经度。

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

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

我不知道怎么去使用这个："http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&sensor=true" 在页面上显示城市名称。

我怎样才能做到这一点？

【问题讨论】：

如果您不打算使用地图，您知道这违反了 Google 的 TOS 对吗？点 10.4 这里developers.google.com/maps/terms没有谷歌地图就不能使用内容。除非 Maps API 文档明确允许您这样做，否则您不会在没有相应 Google 地图的情况下在 Maps API 实施中使用内容。例如，您可以在没有相应 Google 地图的情况下显示街景图像，因为 Maps API 文档明确允许这种用途。是的，@PirateApp 有一个很好的观点。那里可能有更好的服务。我以前与SmartyStreets 合作过，我知道他们有更开放的服务条款。但是，大多数服务不进行反向地理编码。我知道 Texas A&M 有一个 free service，但他们有 TOS 警告你不能收集其他人的数据，而且他们之前曾遇到过正常运行时间和准确性问题。 【参考方案1】：

您可以使用 Google API 执行类似的操作。

请注意，您必须包含 google 地图库才能使用此功能。谷歌地理编码器返回大量地址组件，因此您必须对哪个城市拥有城市做出有根据的猜测。

“administrative_area_level_1” 通常是您要查找的内容，但有时地区是您所追求的城市。

无论如何 - 可以在 here 和 here 找到有关 google 响应类型的更多详细信息。

下面是可以解决问题的代码：

<!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>

【讨论】：

对于 1 级管理区域不正确，有时城市名称不存在。 - "long_name"=>"San Francisco", "types"=>["administrative_area_level_2", "political"] , "short_name"=>"San Francisco", "long_name"=>"California", "types "=>["administrative_area_level_1", "political"], "short_name"=>"CA" , "long_name"=>"United States", "types"=>["country", "political"], " short_name"=>"美国" 对于 V3，'latlng':latlng 字符串应更改为 'location'，如 ...geocode('location':latlng)。这个例子让我几乎到了那里，但“latlng”字符串似乎在较新的 api 中不再有效。详情请参阅：developers.google.com/maps/documentation/javascript/…。 @Michal 我们怎样才能只找到国家名称或国家代码而不是完整地址？ @ajay 在 if 语句中测试 "country" 和 city 变量现在将返回国家数据。如果将其重命名为 country = results[0].address_components[i] 您可以通过 country.long_name 和 country.short_name 访问数据与此同时，您需要一个 API 密钥才能使用此 google 服务。如果注册，您将获得每月 200 美元的积分。【参考方案2】：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div>Country: <span id="country"></span></div>
  <div>State: <span id="state"></span></div>
    <div>City: <span id="city"></span></div>
      <div>Latitude: <span id="latitude"></span></div>
        <div>Longitude: <span id="longitude"></span></div>
          <div>IP: <span id="ip"></span></div>

使用 html5 地理位置需要用户许可。如果您不想这样做，请使用外部定位器，例如 https://geolocation-db.com 支持 IPv6。没有限制和无限的请求。

JSON：https://geolocation-db.com/json JSONP：https://geolocation-db.com/jsonp

例子

对于纯 javascript 示例，不使用 jQuery，请查看 this 答案。

【讨论】：

非常感谢@OP这个宝藏。在 SO 上花费 1 小时后，这是我发现该服务支持每天无限制免费 API 访问的第一个链接（geolocation-db.com）。这不适用于最新版本的 angular (v12)。回调未定义错误。总是显示美国，但我当前的位置是阿曼。在澳大利亚不为我返回州或城市国家【参考方案3】：

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

$.get("http://ipinfo.io", function(response) 
    console.log(response.city, response.country);
, "jsonp");

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

【讨论】：

虽然不准确。无法从俄罗斯大型提供商的 IP 中检测到城市甚至 trgion : ( 大声笑...这给了我的内部网络 ip (192.168...) 我可以通过设备（手持）浏览器进行操作吗？似乎不可靠。我现在正在使用笔记本电脑和手机。通过 ipinfo.io 显示的两个设备中的城市相距 530 公里！【参考方案4】：

您可以使用 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>

并使用 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>

【讨论】：

【参考方案5】：

这里是更新的工作版本，它将获得城市/城镇，看起来在 json 响应中修改了一些字段。参考此问题的先前答案。（感谢 Michal 和另一个参考：Link

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

【讨论】：

【参考方案6】：

geolocator.js 可以做到这一点。（我是作者）。

获取城市名称（有限地址）

geolocator.locateByIP(options, function (err, location) 
    console.log(location.address.city);
);

获取完整的地址信息

下面的示例将首先尝试 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);
);

这在内部使用 Google API（用于地址查找）。因此，在此调用之前，您应该使用您的 Google API 密钥配置地理定位器。

geolocator.config(
    language: "en",
    google: 
        version: "3",
        key: "YOUR-GOOGLE-API-KEY"
    
);

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

【讨论】：

【参考方案7】：

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

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;

【讨论】：

【参考方案8】：

您可以使用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);
                 );
        );
    );

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>

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

【讨论】：

【参考方案9】：

正如@PirateApp 在他的评论中提到的那样，按照您的意图使用 Maps API 是明确反对 Google 的 Maps API 许可的。

您有多种选择，包括下载 Geoip 数据库并在本地查询或使用第三方 API 服务，例如我的服务 ipdata.co。

ipdata 为您提供来自任何 IPv4 或 IPv6 地址的地理位置、组织、货币、时区、调用代码、标志和 Tor 出口节点状态数据。

并且可扩展，具有 10 个全局端点，每个端点每秒能够处理 >10,000 个请求！

此答案使用非常有限的“测试”API 密钥，仅用于测试几个调用。注册您自己的免费 API 密钥并每天收到多达 1500 个开发请求。

$.get("https://api.ipdata.co?api-key=test", function(response) 
  $("#ip").html("IP: " + response.ip);
  $("#city").html(response.city + ", " + response.region);
  $("#response").html(JSON.stringify(response, null, 4));
, "jsonp");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><a href="https://ipdata.co">ipdata.co</a> - IP geolocation API</h1>

<div id="ip"></div>
<div id="city"></div>
<pre id="response"></pre>

小提琴； https://jsfiddle.net/ipdata/6wtf0q4g/922/

【讨论】：

【参考方案10】：

这是另一个尝试.. 为已接受的答案添加更多内容可能更全面.. 当然 switch -case 会使它看起来很优雅。

function parseGeoLocationResults(result) 
    const parsedResult = 
    const address_components = result;

    for (var i = 0; i < address_components.length; i++) 
        for (var b = 0; b < address_components[i].types.length; b++) 
            if (address_components[i].types[b] == "street_number") 
                //this is the object you are looking for
                parsedResult.street_number = address_components[i].long_name;
                break;
            
            else if (address_components[i].types[b] == "route") 
                //this is the object you are looking for
                parsedResult.street_name = address_components[i].long_name;
                break;
            
            else if (address_components[i].types[b] == "sublocality_level_1") 
                //this is the object you are looking for
                parsedResult.sublocality_level_1 = address_components[i].long_name;
                break;
            
            else if (address_components[i].types[b] == "sublocality_level_2") 
                //this is the object you are looking for
                parsedResult.sublocality_level_2 = address_components[i].long_name;
                break;
            
            else if (address_components[i].types[b] == "sublocality_level_3") 
                //this is the object you are looking for
                parsedResult.sublocality_level_3 = address_components[i].long_name;
                break;
            
            else if (address_components[i].types[b] == "neighborhood") 
                //this is the object you are looking for
                parsedResult.neighborhood = address_components[i].long_name;
                break;
            
            else if (address_components[i].types[b] == "locality") 
                //this is the object you are looking for
                parsedResult.city = address_components[i].long_name;
                break;
            
            else if (address_components[i].types[b] == "administrative_area_level_1") 
                //this is the object you are looking for
                parsedResult.state = address_components[i].long_name;
                break;
            

            else if (address_components[i].types[b] == "postal_code") 
                //this is the object you are looking for
                parsedResult.zip = address_components[i].long_name;
                break;
            
            else if (address_components[i].types[b] == "country") 
                //this is the object you are looking for
                parsedResult.country = address_components[i].long_name;
                break;
            
        
    
    return parsedResult;

【讨论】：

【参考方案11】：

这是一个简单的函数，您可以使用它来获取它。我使用 axios 来发出 API 请求，但您可以使用其他任何东西。

async function getCountry(lat, long) 
  const  data:  results   = await axios.get(`https://maps.googleapis.com/maps/api/geocode/json?latlng=$lat,$long&key=$GOOGLE_API_KEY`);
  const  address_components  = results[0];

  for (let i = 0; i < address_components.length; i++) 
    const  types, long_name  = address_components[i];

    if (types.indexOf("country") !== -1) return long_name;

【讨论】：

【参考方案12】：

您也可以使用我的服务https://astroip.co，这是一个新的地理定位 API：

$.get("https://api.astroip.co/?api_key=1725e47c-1486-4369-aaff-463cc9764026", function(response) 
    console.log(response.geo.city, response.geo.country);
);

AstroIP 提供地理定位数据以及代理、TOR 节点和爬虫检测等安全数据点。 API 还返回货币、时区、ASN 和公司数据。

这是一个相当新的 API，来自全球多个地区的平均响应时间为 40 毫秒，这使其成为少数可用的超快速地理定位 API 列表。

提供每月最多 30,000 个免费请求的大型免费计划。

【讨论】：

服务不工作了（现在？）不，不幸的是，它已经在几个月前关闭了。

以上是关于使用地理位置获取城市名称[重复]的主要内容，如果未能解决你的问题，请参考以下文章

从城市名称获取地理位置

如何在iphone中获取地理位置城市名称？

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

无法从地理位置获取城市名称

如何使用纬度和经度获取位置名称或城市？

如何使用地理位置获取城市名称并重定向到该城市的 URL？